<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;
}
<div class="stripes"></div>
.stripes {
width: 240px;
height: 240px;
background-color: #fff;
background-image: linear-gradient(90deg, transparent 50%, #000 50%);
background-size: 60px 60px;
background-repeat: repeat;
}
<div class="polka-dot"></div>
.polka-dot {
width: 240px;
height: 240px;
background-color: #000;
background-image: radial-gradient(#fff 10%, transparent 11%),
radial-gradient(#fff 10%, transparent 11%);
background-size: 60px 60px;
background-position: 0 0, 30px 30px;
background-repeat: repeat;
}
<div class="checkerboard"></div>
.checkerboard {
width: 240px;
height: 240px;
background-color: #fff;
background-image: linear-gradient(
45deg,
#000 25%,
transparent 25%,
transparent 75%,
#000 75%,
#000
),
linear-gradient(
-45deg,
#000 25%,
transparent 25%,
transparent 75%,
#000 75%,
#000
);
background-size: 60px 60px;
background-repeat: repeat;
}
Оформление средствами CSS
CSS