clip-path with polygon() and circle()

clip-path clips the visible area of an element to a specified shape. Everything outside the shape is invisible (but still takes up space in the layout).

Clip an element to a circular shape. The argument is the radius:

Clip to an ellipse by specifying x-radius, y-radius, and optional center position:

The most powerful clip-path. Define a polygon by listing x,y coordinate pairs:

Clip to a rectangle with optional rounded corners. Arguments are inset distances:

Create angled section transitions between page sections:

clip-path with the same number of points can be transitioned for reveal and morph animations:

For simple rounded shapes, border-radius is better — it works with background and border. Use clip-path when you need non-rectangular shapes that border-radius cannot achieve.

path() accepts an SVG path string for arbitrary shapes:

clip-path creates a new stacking context and may trigger paint on every frame when animated. Animating clip-path is more expensive than transform or opacity — combine carefully.

The coordinate system for clip-path is the element's border box (or margin box for SVG). Percentages are relative to the element's dimensions.

clip-path clips elements to geometric shapes. circle() and ellipse() create rounded clips. polygon() defines any multi-vertex shape. inset() clips to a rectangle with optional rounding. Animate between polygon shapes with the same point count for dramatic reveals. Use path() for SVG-based arbitrary shapes.