JSFiddle - React, Tailwind, and code Playground

by suhail

HTML

<img src="https://picsum.photos/id/12/500/100" >

<img src="https://picsum.photos/id/10/700/100" >

<img src="https://picsum.photos/id/125/500/200" >

CSS

img {
   -webkit-mask:
     linear-gradient(-135deg,#fff 50%,transparent 50%) top left ,
     linear-gradient(-225deg,#fff 50%,transparent 50%) top right;
  -webkit-mask-size:2000px 2000px; /* width = height and big enough to consider all the cases */
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-composite: destination-in;
  mask:
     linear-gradient(-135deg,#fff 50%,transparent 50%) top left,
     linear-gradient(-225deg,#fff 50%,transparent 50%) top right;
  mask-size:2000px 2000px; /* width = height and big enough to consider all the cases */
  mask-repeat:no-repeat;
  mask-composite: intersect;

}