horizontal line of repeating CSS triangles

Question

I am trying to achieve the following using CSS (just the white triangled horizontal line, not the grey background).

I am trying to apply it to a psuedo element like so, but I know I am missing something, or not doing it correctly.

&: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

Use a conic-gradient(). Adjust the variable s to control the size and the 80px to control the distance between triangles

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