JSFiddle - React, Tailwind, and code Playground
HTML
<div class="vote-list vote-list--top10">
<div class="vote-list__votes">
<div class="fake-mask">
<div class="cut">
<img src="http://lorempixel.com/600/600/" class="imageshape" />
</div>
</div>
</div>
</div>
CSS
.fake-mask{
height: 139px;
width: 166px;
overflow: hidden;
position: relative;
/* border: solid 1px rgba(255,255,255,0.2); */
/* -webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
position: absolute;
left: 100px;
top: 130px; */
}
/* corner cut */
.fake-mask .cut {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
width: 254px;
height: 254px;
position: absolute;
left: -73px;
top: -67px;
overflow: hidden;
border: solid 1px rgba(255,255,255,0.2);
}
.fake-mask img {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
position: absolute;
width: 100%;
left: 72px;
top: 47px;
}
.vote-list img {
border-radius: 5px 5px 5px 5px;
height: 146px;
width: 163px;
}
/* rest borders */
.vote-list.vote-list--top10 img {
border: solid 1px #4d6b74;
border: solid 1px rgba(255,255,255,0.2);
height: 133px;
}
body{
background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}