如何解决如何创建带有方形锯齿的水平线?
你能帮我处理这种 hr 样式吗,比如 zip,只有 css 我什至不知道如何开始,当然它写道我需要使用 2 个渐变。
解决方法
如下图
.box {
height:15px;
background:
repeating-linear-gradient(90deg,blue 0 5px,#0000 0 10px) top,/* top gradient*/
repeating-linear-gradient(90deg,#0000 0 5px,blue 0 10px) bottom,/* bottom gradient*/
linear-gradient(blue 0 0) center; /* a line in the middle */
background-size:100% calc(100%/3); /* the 3 with the same size */
background-repeat:no-repeat;
}
<div class="box"></div>
或
.box {
height:15px;
background:
repeating-linear-gradient(90deg,repeating-linear-gradient(90deg,blue 0 10px) bottom;
background-size:100% calc(2*100%/3);
background-repeat:no-repeat;
}
<div class="box"></div>
另一个简化版本:
.box {
height:15px;
background:
linear-gradient(90deg,blue 50%,#0000 0) top,linear-gradient(90deg,#0000 50%,blue 0) bottom;
background-size:10px calc(2*100%/3);
background-repeat:repeat-x;
}
<div class="box"></div>
样式来自 Termani Afif's answer,只需使用 hr
标签。
hr {
border: none;
}
.box {
height: 15px;
background: repeating-linear-gradient(90deg,blue 0 5px,/* top gradient*/
repeating-linear-gradient(90deg,blue 0 10px) bottom,/* bottom gradient*/
linear-gradient(blue 0 0) center;
/* a line in the middle */
background-size: 200% calc(100%/3);
/* the 3 with the same size */
background-repeat: no-repeat;
}
<hr class="box" />
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。