JSFiddle - React, Tailwind, and code Playground

HTML

<div class="a">
    <div class="b"></div>
</div>

CSS

.a {
    margin-top: 220px;
    position: relative;
    height: 300px;
    background: green;
    -webkit-transform-origin: 0 0;
     -moz-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  -o-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: skewY(-3.5deg);
  -moz-transform: skewY(-3.5deg);
  -ms-transform: skewY(-3.5deg);
  -o-transform: skewY(-3.5deg);
  transform: skewY(-3.5deg);    
    overflow: hidden;
    
  -webkit-transform-style: preserve-3d;
  -webkit-perspective: 1000;
    
     -webkit-backface-visibility: hidden;
}
.b {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin-top: -150px;
    margin-bottom: -150px;
    background: url("http://dataup.sdasofia.org/PRESENTACII/PICTURES/Forces%20of%20Nature/Forces%20of%20nature%20007.jpg");
    -webkit-background-size: 2000px auto;
    background-size: 1000px auto;
    -webkit-transform-style: preserve-3d;
    -webkit-perspective: 1000;
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: skewY(3.5deg);
    -moz-transform: skewY(3.5deg);
    -ms-transform: skewY(3.5deg);
    -o-transform: skewY(3.5deg);
    transform: skewY(3.5deg);
    
}