html - 我想使用 css3 创建之字形垂直波

Question

这是我想要使用 css3 实现的图像，而不是任何其他库或 js。

Answer 1

使用 2 个使用 linear-gradient 的背景创建背景，并使用 margin:0 auto; 将其放置在中间

body {
  margin: 0;
}

.container {
  background: #F7F2E2;
  position: fixed;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.zigzag {
  margin: 0 auto;
  background: #F7F2E2;
  position: relative;
  height: 100%;
  width: 16px;
  z-index: 1;
}

.zigzag:before,
.zigzag:after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
}

.zigzag:before {
  width: 16px;
  height: 100%;
  left: calc(50% - 8px);
  background: linear-gradient(-45deg, #F7A9B9 8px, transparent 0) 0 8px, linear-gradient(225deg, #F7A9B9 8px, transparent 0) 0 8px;
  background-position: top left;
  background-repeat: repeat-y;
  background-size: 16px 16px;
}

.zigzag:after {
  width: 16px;
  height: 100%;
  left: calc(50% - 7px);
  background: linear-gradient(-45deg, #F7F2E2 8px, transparent 0) 0 8px, linear-gradient(225deg, #F7F2E2 8px, transparent 0) 0 8px;
  background-position: top left;
  background-repeat: repeat-y;
  background-size: 16px 16px;
}

<div class="container">
  <div class="zigzag"></div>
</div>