Zig-Zag edges using CSS mask 관련

CSS > Article(s)

---

Article(s)

---

Zig-Zag edges using CSS mask

One line of code to add Zig-Zag edges to any element using the mask property

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));
}

See Zig-Zag edges by t_afif on CodePen.

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

CSS-only zig-zag borders

More detail

Fancy CSS Borders Using Masks (Zig-Zag, Wavy, and More)

---

In this article, we look at modern CSS mask techniques to create three fancy CSS borders without having to use a background image.

More CSS Tips

• Hexagon shapes with rounded corners Use the new shape() function to create a hexagon shape with rounded corners. April 16, 2025
• The unknown behavior of flex-wrap flex-wrap doesn't only control the wrapping of items but also affects the alignment. April 14, 2025
• An infinite logos animation Using the offset property to create a CSS-only infinite logos animation. March 13, 2025
• Transparent inner border for images A simple code to add a fancy transparent inner border to image elements. March 06, 2025

Zig-Zag edges using CSS mask

---

One line of code to add Zig-Zag edges to any element using the mask property