Use the CSS code below to create a zig-zag line that can be used as a border.

Copy Code 


.element::before {
    height: 29px;
    width: 55px;
    background: linear-gradient(135deg, white 35%, transparent 25%) -25px 0, linear-gradient(225deg, white 35%, transparent 25%) -25px 0, linear-gradient(315deg, white 35%, transparent 25%), linear-gradient(45deg, white 35%, transparent 25%);
    background-color: #ffcc00;
    display: block;
    content: "";
    background-size: 16px 31px;
    background-repeat: repeat-x;
}

Zig Zag line made with CSS

This is the Zig Zag line that will result from using the CSS code above on the .element class.

Topics: CSS