重复 CSS 个三角形的水平线

Question

我正在尝试使用 CSS 实现以下目标（只是白色三角形水平线，而不是灰色背景）。

我正在尝试将它应用到像这样的伪元素，但我知道我遗漏了一些东西，或者没有正确地做。

&:after {
  content: '';
  width: 200px;
  height: 50px;
  position: absolute;
  background-repeat: repeat-x;
  background: linear-gradient(to bottom right, #fff 0%, #fff 50%, #a48d01 50%, #a48d01 100%);
}

Answer 1

.gradient-bg{
  height: 50px;
  width: 100%;
  background: linear-gradient(45deg, transparent 50px, transparent 0px, #a48d01 50px, #a48d01 100px), linear-gradient(135deg, transparent 0px, transparent 50px, red 50px, red 100px);
  background-size: 40px;
  background-position: 0 30px;
}

<p class="gradient-bg"></p>

也许这可以给你一些想法。你需要使用两个渐变。

Answer 2

使用 conic-gradient()。调整变量 s 来控制大小，调整变量 80px 来控制三角形之间的距离

.box {
  --s: 25px;
  height:200px;
  background:
   conic-gradient(from -135deg at var(--s) 50%,red 90deg,#0000 0) center/80px calc(2*var(--s)) repeat-x
}

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

重复 CSS 个三角形的水平线

horizontal line of repeating CSS triangles

css

background

border