How to create a ZigZag border in CSS

Creating a zigzag border with CSS is quite easy and we can achieve it just by using CSS3 property linear-gradient only and not an image. So here is how to create a zigzag border with CSS only.

Create a zigzag border with CSS Demo code

<style type="text/css">
.menu {
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.menu ul {
    list-style-type: none;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: yellow;
    padding: 0;
    margin-left: !important;
    position: relative;
}
.menu ul li {
    padding: 20px;
    list-style: none;
}
.menu li a {
    text-decoration: none;
    font-family: Helvetica;
    text-transform: uppercase;
    padding: 0;
    margin: 0;
    color: #222;
}
ul:before {
    display: block;
    content: "";
    width: 100%;
    height: 20px;
    background: linear-gradient(45deg, yellow 25%, transparent 25%), linear-gradient(-45deg, yellow 25%, transparent 25%);
    background-size: 20px 20px;
    background-position: -50px;
    position: absolute;
    top: -20px;
    left: 0;

}
ul:after {
    display: block;
    content: "";
    width: 100%;
    height: 20px;
    background: linear-gradient(135deg, yellow 25%, transparent 25%), linear-gradient(-135deg, yellow 25%, transparent 25%);
    background-size: 20px 20px;
    background-position: -50px;
    position: absolute;
    bottom: -20px;
    left: 0;

}
</style>
<div class="zigzag-bg">
        <div class="menu">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Our Services</a></li>
                <li><a href="#">Shop</a></li>
                <li><a href="#">Contact Us</a></li>
            </ul>
        </div>
</div>