Clip-path

clip-path

Cut an element into a shape! Squares become circles, diamonds, or any polygon.

Basic shapes

.circle {
  clip-path: circle(50%);           /* circle */
}
.squircle {
  clip-path: ellipse(40% 50% at 50% 50%);
}
.chrome-badge {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

polygon

Any shape with point coordinates (x, y) as percentages:

.arrow {
  clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
}

Inset

Shift edges inward:

.inset-corners {
  clip-path: inset(10px 20px);   /* cut 10px top/bottom, 20px sides */
}

Interactive hook

Animate clip-path on hover for a wipes effect:

.img-wrap {
  transition: clip-path 0.4s ease;
  clip-path: circle(50%);
}
.img-wrap:hover {
  clip-path: circle(100%);
}

Tips

• Coordinates go clockwise from top-left for polygons.
• Works with any element: images, text, buttons.
• Pair with position: relative if you zoom the box.
• clip-path does NOT remove layout space (the box keeps its size).

TL;DR

• clip-path: circle() / ellipse() / polygon() / inset().
• Percentages are easiest to reason about.
• Animate it for cut-in transitions.
• The element keeps its box size; only the paint is clipped.