Section Styling

by Sumesh KP

HTML

<div>

<div class="blue">
  <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
    survived not only five centuries,
  </p>
</div>
<div class="pink">
  <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
    survived not only five centuries,
  </p>
</div>
<div class="green">
  <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
    survived not only five centuries,
  </p>
</div>
</div>

CSS

.blue:after {
  background: #12deff;
}

.pink:after {
  background: #af8fef;
}

.green:after {
  background: #fb00ff;
}
html{
  height: 100%;
    position: relative;
}
body {
    padding: 0;
    margin: 0;
    width: 100%;    
    background-color: red; /* For browsers that do not support gradients */
    background-image: linear-gradient(to bottom, #12deff 22%, #fb00ff 35%);  /* Standard syntax (must be last) */
}

div {
  position: relative;
  background: transparent;
}

div:after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
  -ms-transform: skewY(5deg);
  /* IE 9 */
  -webkit-transform: skewY(5deg);
  /* Safari 3-8 */
  transform: skewY(5deg);
}

.blue,
.pink,
.green {
  padding: 80px 10px;
}