JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
<div class="imageWrap ro">
    <div class="pic"></div>
</div>
<div class="imageWrap">
    <div class="pic2"></div>
</div>
</div>

CSS

.container{
    width:600px;
    height:400px;
    border:1px solid red;
    overflow:hidden;
    white-space:nowrap;
}
.imageWrap{
    width:300px;
    display:inline-block;
    height:500px;
    position:relative;
    width:400px;
    vertical-align:top;
    margin-left:-70px;
}
.imageWrap.ro{
    border-right:5px solid red;
    -webkit-transform:rotate(15deg) translateZ(0);
    -moz-transform:rotate(15deg);
    transform:rotate(15deg) translateZ(0);
    overflow:hidden;
    z-index:1;
    margin-left:-100px;
    margin-top:-80px;
}
.pic{
    background:url('http://lorempixel.com/output/technics-q-c-730-727-3.jpg');
    -webkit-transform:rotate(-15deg) translateZ(0);
    -moz-transform:rotate(-15deg);
    transform:rotate(-15deg) translateZ(0);
    width:640px;
    height:640px;
    position:absolute;
    left:-50px;
}
.pic2{
    width:400px;
    height:400px;
    background:url('http://lorempixel.com/output/fashion-q-c-627-607-1.jpg');
}