clip-path
The clip-path property clips an element to a basic shape, path, or reference box.
Syntax
clip-path: <shape> | <url> | <geometry-box>;
Examples
.badge {
clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%);
}
.circle { clip-path: circle(50%); }
Output
Renders a downward-pointing pennant shape and a perfectly circular crop of the element.
Notes
Shape functions include inset(), circle(), ellipse(), polygon(), and path(). Clipped areas are not painted and not interactive. It is animatable when shapes have matching point counts.
Browser & runtime support
| Environment | Since version |
|---|---|
| chrome | 55 |
| firefox | 54 |
| safari | 9.1 |
| edge | 79 |