时间戳

首页 > 解决方案 > 如何创建带有方形之字形的水平规则？

html - 如何创建带有方形之字形的水平规则？

问题描述

你能帮我用这种 hr 风格，比如 zip，只有 css 我什至不知道如何开始，当然它写道我需要使用 2 个渐变。

hr-zip

标签： htmlcsslinear-gradients

解决方案

像下面

.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,blue  0 5px,#0000 0 10px) top,   
    repeating-linear-gradient(90deg,#0000 0 5px,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>

推荐阅读