<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%);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.