无限人字形线

Question

我不知道怎么用英语不能命名 - 我也不会用法语知道 - 但我需要设计一个由普通和反转雪佛龙组成的无限线。它似乎被称为雪佛龙线。

这是我想要的一个例子，我只需要一行：

这是我迄今为止使用before和after伪元素所做的工作。也许还有另一种我无法想到的方式。现在我没有实现将其显示为雪佛龙，我不明白重复线性渐变如何适用于该位置。

.chevron-line {
  position: relative;
  height: 15px;
  background: white;
}

.chevron-line::before,
.chevron-line::after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.chevron-line::before {
  background: repeating-linear-gradient(135deg,
    #000, #000 5px /* black stripe */,
    transparent 0, transparent 20px /* blue stripe */
  );
 }

.chevron-line::after {
  background: repeating-linear-gradient(-135deg,
    transparent 0px, transparent 10px /* blue stripe */,
    #000, #000 15px /* black stripe */,
    transparent 0px, transparent 20px /* blue stripe */
  );
}

<div class="chevron-line"></div>

Answer 1

你可以用css渐变

来做到这一点

＆＃13;

＆＃13;

div.box {
height: 500px;
background: 
linear-gradient(135deg, #ffffff 25%, transparent 25%) -50px 0,
linear-gradient(225deg, #ffffff 25%, transparent 25%) -50px 0,
linear-gradient(315deg, #ffffff 25%, transparent 25%),
linear-gradient(45deg, #ffffff 25%, transparent 25%);	
background-size: 100px 100px;
background-color: #000000;

}

＆＃13;

<div class="box">
</div>

＆＃13;

＆＃13;

＆＃13;

让它像这样瘦

＆＃13;

＆＃13;

div.box {
height: 500px;
background: 
linear-gradient(135deg, #ffffff 35%, transparent 35%) -50px 0,
linear-gradient(225deg, #ffffff 35%, transparent 35%) -50px 0,
linear-gradient(315deg, #ffffff 35%, transparent 35%),
linear-gradient(45deg, #ffffff 35%, transparent 35%);	
background-size: 100px 100px;
background-color: #000000;

}

＆＃13;

<div class="box"></div>

＆＃13;

＆＃13;

＆＃13;