<img src="https://hacks.mozilla.org/files/2017/06/omega.jpg" class="circle">
<img src="https://hacks.mozilla.org/files/2017/06/omega.jpg" class="inset">
<img src="https://hacks.mozilla.org/files/2017/06/omega.jpg" class="poly">
<img src="https://hacks.mozilla.org/files/2017/06/omega.jpg" class="ellipse">
.circle {
  -webkit-clip-path: circle(100% at 100% 100%);
  clip-path: circle(100% at 100% 100%);
}

.inset {
  -webkit-clip-path: inset(50px 0px);
  clip-path: inset(50px 0px);
}

.poly {
  -webkit-clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
  clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
}

.ellipse {
  -webkit-clip-path: ellipse(50% 50%);
  clip-path: ellipse(50% 50%);
}

img {
  width: 300px;
  margin: 1em;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.