时间:2021-07-01 10:21:17 帮助过:78人阅读
而在Web页面上,没有CSS3之前,我们只能用背景图片来实现类似功能,这当然不是个高效的方式,且难于维护和调整。
比如你只是想调整下颜色、线条大小和倾斜的角度,你都得打开作图软件来折腾一下。
现在我们可以使用CSS3伪元素及其背景渐变(gradient)来实现这一有趣而实用的效果。
我们观察下波浪线,有这么2个基本几何特征:
1. 波折线是重复的,可以被分解为若干相连的“角”形状
2. 这些“角”的连接点处是平滑过渡的,不能出现毛刺,所以需要对顶点处做平滑处理
对于(1),我们可以首先创建一个尖角形状(由一撇一捺2条短直线组成),然后使用x方向的repeat来重复。
对于(2),我们可以使用渐变色,模拟人手划线时,在转弯处力道减弱,我们在尖角相交处使用相对淡色,构造出圆角的视觉感受。
CSS3线性渐变我们注意到每个“角”都有2条边,如果以默认渐变轴(从上往下的一条垂直线)来看,左边的呈现45°倾斜,而右边的呈现315°倾斜。
那么如何创建一个45°的倾斜线呢?我们很容易想到用rotate变换,但是rotate是作用于整个元素上的,在这里并不适用。
我们换个思路,CSS3中的线性渐变(linear-gradient)可以完成上述要求,线性渐变的核心是渐变轴、起点终点和颜色值分布。
通过设置渐变轴的角度为45°,我们可以得到倾斜的特性,然后我们再把渐变宽度缩窄到一个线条的大小,具体代码如下:
div { background: linear-gradient(45deg, transparent, transparent 45%, red, transparent 55%, transparent 100%); background-size: 20px 20px; background-repeat: no-repeat;}
后面的参数表示从0到45%的长度上为透明,45%到55%为红色渐变,55%到100%为透明。
也就是只有元素背景长度的10%出现渐变色(且是两边对称),第二行代码把背景的宽度设置为20px,那么渐变线的实际宽度为10px*10%=2px。
这样我们就得到了一根短折线,具备45°倾斜,且带渐变。
类似的,我们可以得到一根315°的渐变短折线:
div { background: -webkit-linear-gradient(315deg, transparent, transparent 45%, red, transparent 55%, transparent 100%),-webkit-linear-gradient(45deg, transparent, transparent 45%, red, transparent 55%, transparent 100%); background-size: 20px 20px; background-repeat: no-repeat;}
一个简单的技巧就是设置元素的高度为1/2,就得到了一个“V”形。
然后,我们把background-repeat设置为repeat-x,就得到了波浪线形状。
CSS3 :before伪元素我们还剩最后一步,我们需要把波浪线形状添加到文本下面,只要把上面的div元素改成对应文本的:before伪元素即可。
我们还可以设置不同的渐变颜色用以标注不同的文本。
你可以自己在线试试:http://wow.techbrood.com/fiddle/5868
by iefreer