JSFiddle - React, Tailwind, and code Playground

by manofgod

HTML

<svg width="0" height="0">
  <defs>
    <clipPath id="shape">
      <path transform="translate(0.000000,163.000000) scale(0.100000,-0.100000)" d="M373 1197 c-355 -355 -363 -363 -363 -402 0 -39 8 -47 363 -402 355
-355 363 -363 402 -363 39 0 47 8 402 363 355 355 363 363 363 402 0 39 -8 47
-363 402 -355 355 -363 363 -402 363 -39 0 -47 -8 -402 -363z" />
    </clipPath>
  </defs>
</svg>


<img class='photo_rectangle_inverse' src='http://i.imgur.com/NR6kefg.jpg' />

<img class='photo_rectangle_inverse' src='http://i.imgur.com/DXaH323.jpg' />

CSS

.photo_rectangle_inverse {
  height: 160px;
  width: 170px;
  -webkit-clip-path: url(#shape);
  clip-path: url(#shape);
  -webkit-transform: translateZ(1px)
}