What clip-path actually does
It cuts the element's visible region to a shape — everything outside the polygon simply is not painted, though the element still occupies its rectangular space in layout. Because the points are percentages, the shape scales with the element. It works on images, videos, divs, even iframes.
Ideas worth stealing
Slanted section edges (a 4-point polygon with two offset corners), image collages from hexagons, angled buttons and badges from bevels. Clip-path also animates: transition between two polygons with the same number of points and the shape morphs smoothly on hover.
Frequently asked questions
Does anything get uploaded?
No. The clip is applied by the browser, which is why the preview matches production exactly.
Is clip-path widely supported?
Basic shapes yes, in every current browser. The url() form referencing an SVG path is less consistent, especially on older Safari.
Can I animate a clip-path?
Only between shapes with the same number of points. A polygon with five points cannot animate to one with six — add a duplicate point instead.
Does the clipped area still receive clicks?
No. Clipping affects hit-testing too, so the hidden region is not clickable — which is usually what you want and occasionally surprising.
Something wrong with this tool, or an idea for it? Tell us