JSFiddle - React, Tailwind, and code Playground

by jnfsmile

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 */
    -webkit-transform:skewY(10deg); /* Safari and Chrome */
    transform:skewY(-35deg);
}

.box img {
    height: 100%;
    width: 100%;
    
    -ms-transform:skewY(-10deg); /* IE 9 */
    -webkit-transform:skewY(-10deg); /* Safari and Chrome */
    transform:skewY(35deg);

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