JSFiddle - React, Tailwind, and code Playground

by Yolanda Robles

HTML

<div class="cabecera">
</div>

<div class="oblicuo">
</div>

CSS

body{
  overflow-x:hidden;
  background-color: #222;
}

.cabecera{
  background-color: white;
  position: absolute;
  width: 100%;
  height: 170px;
  
  
}

.cabecera::before{
  content:'';
  background-color:purple;
  top: 80px;
  left: 0;
  width: 103%;
  height: 200px;
  position:absolute;
  transform: rotate(5deg) skew(10deg);
  overflow: hidden;
}

.oblicuo{
  background-color: purple;
  position: absolute;
  top: 550px;
  left: -10px;
  width: 103%;
  height: 200px;
  /*-webkit-transform: rotate(5deg) skew(15deg, 15deg);
  -moz-transform: rotate(5deg) skew(15deg, 15deg);
  -ms-transform: rotate(5deg) skew(15deg, 15deg);
  -o-transform: rotate(5deg) skew(15deg, 15deg);*/
  transform: rotate(5deg) ;
}