• Previous CSS Tip
• Next CSS Tip

A CSS-only Zig-Zag edge

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

• One Property
• One Gradient

Use an online generator to easily get the code: css-generators.com/custom-borders

.zig-zag {
  --a: 90deg; /* the angle of the spikes */
  --s: 60px;  /* the size of the spikes */
  
  mask:  
    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 CSS Tips

• A CSS-only wavy shapes Combine gradients and CSS mask to create a wavy shape with a little of code. September 29, 2022
• An infinite image slider A minimal code to create an infinite image slider. September 16, 2022
• A fancy title divider Use background and border-image to create a fancy title divider. August 25, 2022
• A fancy hover effect using outline Use outline to create a simple but nice hover effect. August 24, 2022