CSS: box with zig-zag border

February 10, 2013

Last update: March 29, 2020

In the last few days, I started to play with CSS3 linear-gradient() function taking inspiration from CSS3 Patterns Gallery by Lea Verou.

To understand how it works, I tried to do some experiments and more precisely to create a box with zig-zag border to use as header or side box. In both cases, box is liquid.

To create a box with a zig-zaged bottom border I wrote these lines:

.h-zigzag { /* Horizontal */
    background:
        linear-gradient(-135deg, #333538 5px, transparent 0) 0 5px,
        linear-gradient(135deg, #333538 5px, #fff 0) 0 5px;
    background-color: #333538;
    background-position: left bottom;
    background-repeat: repeat-x;
    background-size: 10px 10px;
}

And this is the code to create a box with zig-zaged right border:

.v-zigzag { /* Vertical */
    background:
        linear-gradient(45deg, #ec173a 5px, transparent 0) 0 5px,
        linear-gradient(135deg, #ec173a 5px, #fff 0) 0 5px;
    background-color: #ec173a;
    background-position: right top;
    background-repeat: repeat-y;
    background-size: 10px 10px;
}

The complete example is available on GitHub.

Notes on compatibility

On Mozilla Firefox 18+, Opera 12+ and MS Internet Explorer 10 the code works out of the box. For Google Chrome and Apple Safari we still have to use the vendor prefix -webkit-: in my opinion the best solution is to use Prefix free, keeping our CSS standard compliant.

For versions of MS Internet Explorer previous than 10, the fallback is already included: box without zig-zag decoration. And if you are asking yourself "do websites need to look exactly the same in every browser?", this is the response.

References

linear-gradient() on MDN

Did you find this post useful? What about