JSFiddle - React, Tailwind, and code Playground

by Softlink

HTML

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

CSS

body{
padding:25px;
background:#222;    
}

.wrap{
display: inline-block;
margin: 25px;
position:relative;
overflow:hidden;
}

.wrap>img{
display:block;
border-radius:10px;   
}

.wrap:before{
content:'';
position:absolute;
top:-100%;
left:0;
width:100%;
height:100%;
background: rgba(255,255,255,0.3);
-webkit-transform-origin: 100% 0;
-webkit-transform: skewY(-26.6deg);
-moz-transform-origin: 100% 0;
-moz-transform: skewY(-26.6deg);
-ms-transform-origin: 100% 0;
-ms-transform: skewY(-26.6deg);
-o-transform-origin: 100% 0;
-o-transform:skewY(-26.6deg);
 z-index:1;   
}

.wrap:after{
content:'';
position:absolute;
top:0px;
bottom:0px;
left:0px;
right:0px;    
border-radius:10px;
box-shadow:0px 0px 0px 5px #222;
z-index:2;    
}