JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

HTML

<div class="angled-sections">

  <div class="angled-section section-flat section-top" style="background-image: url(http://lorempixel.com/1280/800/abstract/);">content</div>

  <div class="angled-section angled angled--top">
    <div class="angled-section__image rotate-cw" style="background-image: url(http://lorempixel.com/1280/800/city/);"></div>
    content
  </div>

  <div class="angled-section angled angled--bottom">
    <div class="angled-section__image rotate-ccw" style="background-image: url(http://lorempixel.com/1280/800/nature/);"></div>
    content
  </div>

  <div class="angled-section section-flat section-bottom" style="background-image: url(http://lorempixel.com/1280/800/abstract/);">content</div>

</div>

CSS

body{
  color: #fff;
  font-family: sans-serif;
}


/* Angled Separators */

.angled-sections {
  width: 100%;
  position: relative;
}

.angled-section.section-flat {
  width: 100%;
  -webkit-background-size: cover;
          background-size: cover;
  background-position: center center;
}
.angled-section.section-flat.section-top {
  padding-bottom: 10vw;
}
.angled-section.section-flat.section-bottom {
  padding-top: 10vw;
}
.angled-section.angled {
  position: relative;
  width: 100%;
  z-index: 10;
  overflow: hidden;
}
.angled-section.angled--top {
  margin-top: -10vw;
  padding-top: 10vw;
}
.angled-section.angled--bottom {
  margin-bottom: -10vw;
  padding-bottom: 10vw;
}
.angled-section.angled--bottom .angled-section__image {
  top: -5vw;
  right: -5vw;
  bottom: 5vw;
  left: -5vw;
}
.angled-section.angled--bottom .angled-section__image:after {
  top: 0;
  bottom: -5vw;
}
.angled-section__image {
  position: absolute;
  top: 5vw;
  right: -5vw;
  bottom: -5vw;
  left: -5vw;
  overflow: hidden;
  -webkit-transform: rotate(-5deg);
  -ms-transform: rotate(-5deg);
  transform: rotate(-5deg);
  background-position: -100% -100%;
  background-repeat: no-repeat;
  z-index: -10;
  -webkit-backface-visibility: hidden;
}
.angled-section__image.rotate-cw {
  -webkit-transform: rotate(5deg);
  -ms-transform: rotate(5deg);
  transform: rotate(5deg);
}
.angled-section__image.rotate-cw:after {
  -webkit-transform: rotate(-5deg);
  -ms-transform: rotate(-5deg);
  transform: rotate(-5deg);
}
.angled-section__image.rotate-ccw {
  -webkit-transform: rotate(-5deg);
  -ms-transform: rotate(-5deg);
  transform: rotate(-5deg);
}
.angled-section__image.rotate-ccw:after {
  -webkit-transform: rotate(5deg);
  -ms-transform: rotate(5deg);
  transform: rotate(5deg);
}
.angled-section__image:after {
  content: "";
  display: block;
  position: absolute;
  top: -5vw;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: inherit;
  -webkit-background-size: cover;
         ...

JavaScript

/**
 * Equals Creative
 * Angled Separators
 */