JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box">
   <img src="http://cssglobe.com/lab/angled/img.jpg" alt="bike" />
</div>

CSS

body {
    margin:0;
    padding:20px 40px;
    background:#fff;
    font:80% Arial, Helvetica, sans-serif;
    color:#555;
    line-height:180%;
}         
  
img{border:none;}

/* angled box styles */

.box{
    height:300px;  
    overflow:hidden;
    -ms-transform:skewY(10deg); /* IE 9 */
    -moz-transform:skewY(10deg); /* Firefox */
    -webkit-transform:skewY(10deg); /* Safari and Chrome */
    -o-transform:skewY(10deg); /* Opera */
    transform:skewY(10deg);
}

.box img {
    height: 100%;
    width: 100%;
    
    -ms-transform:skewY(-20deg); /* IE 9 */
    -moz-transform:skewY(-20deg); /* Firefox */
    -webkit-transform:skewY(-20deg); /* Safari and Chrome */
    -o-transform:skewY(-20deg); /* Opera */
    transform:skewY(-20deg);

    -ms-transform-origin: 100% 100%; /* IE 9 */
    -webkit-transform-origin: 100% 100%; /* Safari and Chrome */
    -moz-transform-origin: 100% 100%; /* Firefox */
    -o-transform-origin: 100% 100%; /* Opera */
    transform-origin: 100% 100%;
}