JSFiddle - React, Tailwind, and code Playground

by Softlink

HTML

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

CSS

.a { height: 400px; width: 20px; background: blue; position: absolute; left: 0; top: 0;}
body{
6padding:50px;
background:#222;    
}

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

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

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

}