JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

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

/* angled box styles */

.box{
    height:300px;  
    overflow:hidden;
    margin:1em 0;
    position:relative;
    }
.box .inner{
    -moz-transform:rotate(5deg);
    -webkit-transform:rotate(20deg);
    -o-transform:rotate(20deg);
    margin-top:-70px;
    margin-right:100px;
    overflow:hidden;
    float:right;
    border:3px solid yellow;
    top:0;
    left:-150px;
    right:-550px;
    bottom:0;
    position:absolute;
    }
.box .inner .content{
    -moz-transform:rotate(-20deg);
    -webkit-transform:rotate(-20deg);
    -o-transform:rotate(-20deg);
    margin-top:60px;
    margin-left:-80px;
    overflow:hidden;
    border:5px solid red;   
    top:0;
    left:150px;
    right:0;
    bottom:0;
    position:absolute;   
}
.box .inner .content .wrap{
    -moz-transform:rotate(15deg);
    top:0;
    left:0;
    right:0;
    bottom:0;
    position:absolute; 
}
img{height:100%;width:100%}