感谢@yeerk提供了如此出色的解决方案！
但我想建议对他的第一个变体进行一些改进——对那些看起来更像三角形的波浪。我建议使用伪元素而不是硬编码的封闭 div :before。:after
它可能看起来像这样（html）：
<div class="triangly-line"></div>
—triangly-line目标装饰元素在哪里（不是“挥手”而是“三角形”）。
相应的样式（使用 LESS 表示法）将如下所示：
@line-width: 300px;
@triangled-size: 6px;
@triangly-color: red;
@double-triangled-size: (@triangled-size * 2 - 1px);
.linear-gradient (@gradient) {
background: -webkit-linear-gradient(@gradient);
background: -o-linear-gradient(@gradient);
background: linear-gradient(@gradient);
}
.triangly-gradient (@sign, @color) {
.linear-gradient(~"@{sign}45deg, transparent, transparent 49%, @{color} 49%, transparent 51%");
}
.triangly-line {
overflow: hidden;
position: relative;
height: @triangled-size;
&:before {
.triangly-gradient("", @triangly-color);
}
&:after {
.triangly-gradient("-", @triangly-color);
}
&:before,
&:after {
content: "";
display: block;
position: absolute;
width: @line-width;
height: @triangled-size;
background-size: @double-triangled-size @double-triangled-size !important;
}
}
结果 CSS（使用上面指定的参数）：
.triangly-line {
overflow: hidden;
position: relative;
height: 6px;
}
.triangly-line:before {
background: -webkit-linear-gradient(45deg, transparent, transparent 49%, red 49%, transparent 51%);
background: -o-linear-gradient(45deg, transparent, transparent 49%, red 49%, transparent 51%);
background: linear-gradient(45deg, transparent, transparent 49%, red 49%, transparent 51%);
}
.triangly-line:after {
background: -webkit-linear-gradient(-45deg, transparent, transparent 49%, red 49%, transparent 51%);
background: -o-linear-gradient(-45deg, transparent, transparent 49%, red 49%, transparent 51%);
background: linear-gradient(-45deg, transparent, transparent 49%, red 49%, transparent 51%);
}
.triangly-line:before,
.triangly-line:after {
content: "";
display: block;
position: absolute;
width: 300px;
height: 6px;
background-size: 11px 11px !important;
}
