感谢@yeerk提供如此出色的解决方案!
但我想对他的第一种变体提出一些建议-那些看起来更三角形的波浪。我建议使用:before
和:after
伪元素,而不是硬编码的封闭div。
它可能看起来像这样(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;
}
.curve
元素粘在一起了吗? - Chadtext-decoration-style:wavy
> https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-style。 - qodeninja