CSS section slants https://jsfiddle.net/zfr3xz3t/1/

style.css

.box {
  width: 100%;
  height: 200px;
  background: #0B0D2C;
  position: relative;
}

.box:before,
.box:after {
  content: '';
  background: inherit;
  display: block;
  height: 50%;
  left: 0;
  position: absolute;
  right: 0;
  z-index: -1;
  -webkit-backface-visibility: hidden;
}

.box1:before {
  top: 0;
  transform: skewY(-3deg);
  transform-origin: 100%;
}

.box1:after {
  bottom: 0;
  transform: skewY(3deg);
  transform-origin: 0 100%;
}

.box2:before {
  top: 0;
  transform: skewY(3deg);
  transform-origin: 100% 0;
}

.box2:after {
  bottom: 0;
  transform: skewY(-3deg);
  transform-origin: 100%;
}