Skip to main content

A CSS-only Zig-Zag edge

How much code is needed to create a Zig-Zag edge?

Use an online generator to easily get the code:

A CSS-only zig-zag border

.zig-zag {
--a: 90deg; /* the angle of the spikes */
--s: 60px; /* the size of the spikes */

conic-gradient(from calc(var(--a)/-2) at bottom,
#000 var(--a),#0000 0) 50%/var(--s);

See the Pen CSS only Zig-Zag edge by Temani Afif (@t_afif) on CodePen.

More detail: