方法1.使用径向渐变绘制波浪线
一个波浪线循环段是有一个朝上的半个圆弧和一个朝下的半个圆弧组合而成的。所以,我们只要使用径向渐变绘制圆弧,再通过background-position控制两个圆弧的位置,让其前后拼接在一起就可以实现波浪线效果。
1
2
3
4
5
6
7
8
9
10
<style type="text/css">
.flow-wave {
background: radial-gradient(circle at 10px -7px, transparent 8px, currentColor 8px, currentColor 9px, transparent 9px) repeat-x,
radial-gradient(circle at 10px 27px, transparent 8px, currentColor 8px, currentColor 9px, transparent 9px) repeat-x;
background-size: 20px 20px;
background-position: -10px calc(100% + 16px), 0 calc(100% - 4px);
}
</style>
<font class="flow-wave">段落文字</font>
效果:段落文字
方法2.使用SVG波形矢量图作为背景
1
2
3
4
5
6
7
8
<style type="text/css">
.flow-wave {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 4'%3E%3Cpath fill='none' stroke='red' d='M0 3.5c5 0 5-3 10-3s5 3 10 3 5-3 10-3 5 3 10 3'/%3E%3C/svg%3E") repeat-x 0 100%;
background-size: 20px auto;
}
</style>
<font class="flow-wave">段落文字</font>
效果:段落文字
参考:CSS实现文字下面波浪线