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

Question

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

Answer 1

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;