clip-path
Creates a clipping region that sets what part of an element should be shown. Parts inside the region are visible, while those outside are hidden.
Quick example
.hero-shape {
clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 50% 100%, 0% 75%);
/* creates a pointed banner/hero shape */
}Quick facts
Initial value
noneInherited
No
Applies to
all elements and SVG container elements
Animation type
basicShapeOtherwiseNo
Values
none clip-path Browser Support
Widely available Since 2021 96% global usage
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2021.
Safe to use without fallbacks.
55+
3.5+
9.1+
79+