JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
    <img src="http://alpatriott.ru/works/primer/images/romashki.jpg" alt="">
   
</div>

CSS

body{

background:#222;    
}

.wrap{
width:200px;
    
margin:0 auto;
position:relative;
overflow:hidden;
}

.wrap>img{
display:block;
width:100%;
   
    background: blue; 
}

.wrap:before{
content:'';
position:absolute;
top:0;
left:0;
width:1000px;
height: 50%;
    
 background: blue;     
    
-webkit-transform-origin: left bottom;
-webkit-transform:rotate(-20.5deg);

}