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);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.