Skip to content

Home

Zig zag background pattern

Creates a zig zag background pattern.

💬 Note

The fixed height and width of the element is for demonstration purposes only.

<div class="zig-zag"></div>
.zig-zag {
  width: 240px;
  height: 240px;
  background-color: #fff;
  background-image: linear-gradient(135deg, #000 25%, transparent 25%),
    linear-gradient(225deg, #000 25%, transparent 25%),
    linear-gradient(315deg, #000 25%, transparent 25%),
    linear-gradient(45deg, #000 25%, transparent 25%);
  background-position: -30px 0, -30px 0, 0 0, 0 0;
  background-size: 60px 60px;
  background-repeat: repeat;
}

More like this

Start typing a keyphrase to see matching snippets.