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;  
    min-width: 100px;
    overflow:hidden;
}

.box img {
    height: 100%;
    width: 100%;   
    -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%;
}

@media screen and (min-width:  100px) { .box { -ms-transform:skewY(45deg); -moz-transform:skewY(45deg); -webkit-transform:skewY(45deg); -o-transform:skewY(45deg); transform:skewY(45deg); } .box img { -ms-transform:skewY(-90deg); -moz-transform:skewY(-90deg); -webkit-transform:skewY(-90deg); -o-transform:skewY(-90deg); transform:skewY(-90deg); } }
@media screen and (min-width:  110px) { .box { -ms-transform:skewY(42.5deg); -moz-transform:skewY(42.5deg); -webkit-transform:skewY(42.5deg); -o-transform:skewY(42.5deg); transform:skewY(42.5deg); } .box img { -ms-transform:skewY(-85deg); -moz-transform:skewY(-85deg); -webkit-transform:skewY(-85deg); -o-transform:skewY(-85deg); transform:skewY(-85deg); } }
@media screen and (min-width:  120px) { .box { -ms-transform:skewY(40deg); -moz-transform:skewY(40deg); -webkit-transform:skewY(40deg); -o-transform:skewY(40deg); transform:skewY(40deg); } .box img { -ms-transform:skewY(-80deg); -moz-transform:skewY(-80deg); -webkit-transform:skewY(-80deg); -o-transform:skewY(-80deg); transform:skewY(-80deg); } }
@media screen and (min-width:  130px) { .box { -ms-transform:skewY(37.5deg); -moz-transform:skewY(37.5deg); -webkit-transform:skewY(37.5deg); -o-transform:skewY(37.5deg); transform:skewY(37.5deg); } .box img { -ms-transform:skewY(-75deg); -moz-transform:skewY(-75deg); -webkit-transform:skewY(-75deg); -o-transform:skewY(-75deg); transform:skewY(-75deg); } }
@media...