<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.