<div class="ellipse">
<img src="https://duomly.nyc3.digitaloceanspaces.com/articles/coding/alps-lake.jpg" />
</div>
<div class="circle">
<img src="https://duomly.nyc3.digitaloceanspaces.com/articles/coding/alps-lake.jpg" />
</div>
<div class="polygon">
<img src="https://duomly.nyc3.digitaloceanspaces.com/articles/coding/alps-lake.jpg" />
</div>
.ellipse img {
clip-path: ellipse(200px 200px at 100px 100px);
}
.circle img {
clip-path: circle(30%);
}
.polygon img {
clip-path: polygon(5% 5%, 100% 10%, 900% 75%, 75% 75%, 75% 100%, 60% 75%, 20% 80%);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.