如何创建带有方形锯齿形的水平线？

Question

你能帮我把这个 hr-style 像 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

来自的样式，仅使用 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" />

如何创建带有方形锯齿形的水平线？

How to create a horizontal rule with square zig zags?

html

css

linear-gradients