JSFiddle - React, Tailwind, and code Playground

by Alireza Safian

HTML

<div class="img">
  <img src="http://lorempixel.com/320/320/nature/?v2s" alt="Pellete">
</div>

CSS

div.img {
  position: relative;
  overflow: hidden;
  width: 320px;
  -webkit-clip-path: circle(155px at center);
}
div.img img {
  display: block;
  width: 100%;    
-webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}