Zig zag background pattern
Creates a zig zag background pattern.
- Use
background-color
to set a white background. - Use
background-image
with fourlinear-gradient()
values to create the parts of a zig zag pattern. - Use
background-size
to specify the pattern's size. Usebackground-position
to place the parts of the pattern in the correct locations.
<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; }