html,
body {
  min-height: 1200px;
  margin: 0;
}

body {
  position: relative;
  background:
    linear-gradient(
      to bottom left,
      transparent calc(50% - 1px),
      #fff 50%
    ) no-repeat 0 930px / 100% 70px,
    linear-gradient(
        to bottom left,
        transparent calc(50% - 1px),
        #dcd5f2 50%
      ) no-repeat 0 200px / 100% 200px,
    linear-gradient(
        to bottom,
        #dcd5f2,
        #dcd5f2
      ) no-repeat 0 400px / 100% 200px,
    linear-gradient(
        to bottom right,
        #dcd5f2 calc(50% - 1px),
        #76b946 50%
      ) no-repeat 0 600px / 100% 200px,
    linear-gradient(
      to bottom left,
      #76b946 calc(50% - 1px),
      #ff2376 50%
    ) no-repeat 0 800px / 100% 200px;
}

body::before {
  content: '';
  position: absolute;
  top: 70px;
  width: 200px;
  height: 200px;
  border: 8px solid #5e4f92;
  transform: rotate(-20deg);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.