I want to create zigzag vertical wave using css3

Question

here is the image exact what I want to achieve using css3 only not any other library or js.

Answer 1

Use 2 backgrounds using linear-gradient for creating background and place it in the middle using 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>