CSS Tip

Zig-Zag edges using CSS mask

Add Zig-Zag edges to your element using the mask property and one gradient.

zig-zag edges using mask

.zig-zag {
  --s: 30px;  /* control the size (height of the spikes) */
  --a: 90deg; /* control the angle */
  
  mask: 
    repeating-conic-gradient(from calc(180deg - var(--a)/2) at 50% var(--s),#000 0 var(--a),#0000 0 180deg) 
    50% calc(-1*var(--s))/calc(2*var(--s)*tan(var(--a)/2));
}

Use my online generator to get the code of the different variations: css-generators.com/custom-borders

CSS-only zig-zag borders

More detail: css-tricks.com/css-borders-using-masks

More CSS Tips