锯齿背景图案

创建一个锯齿背景图案。

• 使用 background-color 设置白色背景。
• 使用四个 linear-gradient() 值的 background-image 创建锯齿图案的各个部分。
• 使用 background-size 指定图案的大小。使用 background-position 将图案的各个部分放置在正确的位置。

[!NOTE]

元素的固定 height 和 width 仅用于演示目的。

<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;
}