The clip-path property creates a clipping region that sets what part of an element should be shown. Parts that are inside the region are shown, while those outside are hidden.

Basic Shapes

CSS provides several shape functions:

• circle(): Creates a circular clipping region.
• ellipse(): Similar to circle but allows independent width/height radii.
• inset(): Defines an inset rectangle (cropping from edges).
• polygon(): Defines a shape using multiple x,y coordinate pairs.

Coordinate System

Coordinates are usually relative to the element's box. 0 0 is the top-left corner, and 100% 100% is the bottom-right corner. You can use pixels, percentages, or other units.

Animation

One of the most powerful features of clip-path is that it is animatable. As long as the number of points in a polygon remains the same, you can transition between different shapes smoothly.