30-seconds-of-code/snippets/zig-zag-pattern.md

title, tags, expertise, cover, firstSeen, lastUpdated

title	tags	expertise	cover	firstSeen	lastUpdated
Zig zag background pattern	visual	advanced	blog_images/blue-lake.jpg	2021-01-11T09:51:43+02:00	2021-10-13T19:29:39+02:00

Creates a zig zag background pattern.

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