一、目标目标完成下图效果:二、完成1、分析在::before和::after伪元素的用法一文中有说到使用::befrore和::after可以完成一个六边形。这个案例是用一个#star-six完成一个正三角形,通过::after实现一个倒三角形,然后绝对定位放好位置。我们接下来也 ...
一、目标
目标完成下图效果:
二、完成
1、分析
在::before和::after伪元素的用法一文中有说到使用::befrore和::after可以完成一个六边形。这个案例是用一个#star-six完成一个正三角形,通过::after实现一个倒三角形,然后绝对定位放好位置。我们接下来也用这个思路完成。
2、完成
第一步,先完成如下基本的效果,实现一个在浏览器中居中的文本
代码如下:
<style>.middle{text-align:center;}.title{background-color:black;color:#f3e14f;display:inline-block;font-size:18px;height:40px;line-height:40px;padding:0 50px;}</style><div class="middle"><h5 class="title">升级有好礼</h5></div>
原标题:使用::before和::after来完成尖角效果
关键词:
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。