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

Question

你能帮我解决一下这种 hr 风格吗，比如 zip，仅限 css 我什至不知道如何开始，当然它写道我需要使用 2 个渐变。

Answer 1

如下图

.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>

Answer 2

样式来自Termani Afif's answer，只需使用hr 标签。

hr {
  border: none;
}

.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: 200% calc(100%/3);
  /* the 3 with the same size */
  background-repeat: no-repeat;
}

<hr class="box" />