JSFiddle - React, Tailwind, and code Playground

by Liu David

HTML

<div class="container1"></div>
<div class="container2 zigzag"></div>
<div class="container3 zigzag"></div>
<div class="container4 zigzag"></div>

CSS

.container1 {
  width: 100%;
  height: 200px;
  background: #fff;
}
.zigzag {
  position: relative;
  width: 100%;
  height: 200px;
  -webkit-filter: drop-shadow(rgba(0, 0, 0, 0.8) 0px 1px 2px);
}
.zigzag:before {
  content: "";
  display: block;
  position: absolute;
  top: -10px;
  width: 100%;
  height: 10px;
}
.container2 {
  background: #E2E2E2;
}
.container2:before {
  background:
    linear-gradient(
      45deg, transparent 33.333%,
      #E2E2E2 33.333%, #E2E2E2 66.667%,
      transparent 66.667%
    ),
    linear-gradient(
      -45deg, transparent 33.333%,
      #E2E2E2 33.333%, #E2E2E2 66.667%,
      transparent 66.667%
    );
  background-size: 20px 40px;
}