JSFiddle - React, Tailwind, and code Playground

by web tiki

HTML

<div class="wrap">
    <div class="c"></div>
    <div class="a"><img src="http://lorempixel.com/output/people-q-c-640-480-8.jpg" alt="" />        </div>
    <div class="b"> <a href="#">link</a></div>
</div>

CSS

.wrap{
    width:900px;
    position:relative;
    overflow:hidden;
}
.c, .b{
    width:20%;
    float:right;
    height:200px;
    background:gold;
}
.b{
    clear:right;
    height:400px;
    background:teal;
}
.a{
    position:absolute;
    top:200px; left:0;
    width:110%; height:400px;
    overflow:hidden;
    transform-origin:0 0;
    transform: rotate(24deg);
}
.a img{
    width:100%;
    display:block;
    transform-origin:0 0;
    transform: rotate(-24deg);
}