We start by adding the first gradient layer with a solid color (red) at the top. A height that’s equal to calc(100% - 40px) is used to leave 40px of empty space at the bottom.

We add a second gradient placed at the bottom that takes the remaining height of the container. There’s a little bit of geometry happening to make this work.

Diagram showing how the shape of a zig-zag is created in CSS. An upside down triangle in blue represents the shape and green areas to the left and right of it show the leftover space that is masked out with CSS.

    Next, we repeat the last gradient horizontally (replacing no-repeat with repeat-x). We can already see the zig-zag shape!
    Gradients are known to have anti-aliasing issues creating jagged edges (especially on Chrome). To avoid this, we add a slight transition between the colors, changing blue 90deg, green 0 to green, blue 1deg 89deg, green 90deg.

Then we update the colors to have a uniform shape
 
Last, we use everything inside the mask property!

We can extract two variables from those steps to define our shape: size (40px) and angle (90deg). Here’s how we can express that using placeholders for those variables. I will be using JavaScript to replace those variables with their final values.


Fancy CSS Borders Using Masks 

Do you believe in Aliens?

Lets get this bread

![alt](https://firebasestorage.googleapis.com/v0/b/social-clone-bea47.appspot.com/o/uploads%2Ftx1j0XawUqUcDinlsI0L8o9ou6H3%2F1658199964957.png?alt=media&token=2fae91e0-2caf-4bdd-bc22-31db26a23741)