JSFiddle - React, Tailwind, and code Playground

by David Thomas

HTML

<div class="container">
    <img id="control" src="http://lorempixel.com/150/150/people/1" />
</div>
<div class="container">
    <img id="rectangular" src="http://lorempixel.com/150/150/people/1" />
</div>
<div class="container">
    <img id="circle" src="http://lorempixel.com/150/150/people/1" />
</div>
<div class="container">
    <img id="ellipse" src="http://lorempixel.com/150/150/people/1" />
</div>
<div class="container">
    <img id="polygon" src="http://lorempixel.com/150/150/people/1" />
</div>

CSS

div.container {
    display: inline-block;
}
#rectangular {
    -webkit-clip-path: inset(30px 10px 30px 10px);
    clip-path: inset(30px 10px 30px 10px);
}
#circle {
    -webkit-clip-path: circle(75px at 50% 50%);
    clip-path: circle(75px at 50% 50%)
}
#ellipse {
    -webkit-clip-path: ellipse(75px 50px at 50% 50%);
    clip-path: ellipse(75px 50px at 50% 50%);
}
#polygon {
    -webkit-clip-path: polygon(50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%);
    clip-path: polygon(50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%);
}