How CSS clip-path Works
The clip-path CSS property clips an element to a defined shape. Only the area inside the shape is visible — the rest is transparent (but still occupies space in the layout).
Common use cases include: creative section dividers (diagonal cuts), image masks, button shapes, hover reveal effects, and geometric design elements.
circle()
circle(50% at 50% 50%)Triangle
polygon(50% 0%, 0 100%, 100% 100%)Hexagon
polygon(6 points)Diamond
polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)Frequently Asked Questions
clip-path creates a clipping region that defines the visible area of an element. Outside the region, content is invisible but still occupies layout space. It supports geometric primitives (circle, ellipse, inset) and arbitrary polygons via polygon().
Polygon points are x/y coordinate pairs relative to the element's top-left (0% 0%). The format is: polygon(x1 y1, x2 y2, x3 y3, ...). Values are in percentages (relative) or pixel lengths. Points connect in order, with the last point connecting back to the first.
Yes! Shapes of the same type and with the same number of polygon points can be smoothly transitioned: transition: clip-path 0.5s ease. Browsers interpolate between the point coordinates. Shapes with different point counts will snap rather than animate smoothly.
Apply to a full-width block element: clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%). Use negative margin-bottom equal to the clip amount to prevent gaps. Stack multiple clipped sections for layered wave or diagonal effects.
Yes! clip-path works on any HTML element including img, video, div, and SVG. For images: img { clip-path: circle(50%) } creates a circular image. Combine with object-fit: cover for responsive circular or shaped images.