JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

body {
    margin:0;
    padding:0;
}         
img{border:none;}

/* angled box styles */
.pic{
    position:relative;
    overflow:hidden;
}
.box{
    overflow:hidden;
    margin:0;
    position:relative;
    height: 500px;
    -webkit-transform: scale(1.8, 1);
    -moz-transform: scale(1.8, 1);
    border:1px solid red;
    }
.box .inner{
    -moz-transform:rotate(45deg);
    -webkit-transform:rotate(20deg);
    -o-transform:rotate(20deg);
    border:3px solid yellow;
    top:0;
    right:-50%;
    left:0;
    position:absolute;
    width:500px;
    height:500px;
    }
img{height:100%;width:100%}