<div class="zig-zag"></div>
<div class="zig-zag alt"></div>

.zig-zag {
  --a: 90deg; /* the angle of the spikes*/
  --s: 60px;  /* the size of spikes*/
  
  height: 200px;
  background: repeating-linear-gradient(135deg,#C02942 0 15px,#53777A 0 30px);
  mask: 
    conic-gradient(from calc(var(--a)/-2) at bottom,
      #0000,#000 1deg var(--a),#0000 calc(var(--a) + 1deg)) /* I am adding 1deg to avoid visual glitch */
    50%/var(--s);
}

.zig-zag.alt {
  background: repeating-linear-gradient(135deg,#79BD9A 0 15px,#0B486B 0 30px);
  mask: 
    conic-gradient(from calc(180deg - var(--a)/2) at top,
      #0000,#000 1deg var(--a),#0000 calc(var(--a) + 1deg)) 
    50%/var(--s);
}

body {
  margin: 0;
  min-height: 100vh;
  background: #e9d69b;
  display: grid;
  align-content: space-between;
  gap: 80px;
}