What a CSS clip-path actually does
The clip-path property defines a region of an element that stays visible. Everything outside that region is not drawn, and it is not hit-testable either, so clicks and hovers pass straight through the clipped-away area to whatever sits below. The element still occupies its full box in layout: a 300 by 300 div clipped to a triangle still reserves 300 by 300 of space, still pushes its neighbours around, and still counts for margin collapsing.
Clipping is not the same as masking. A mask blends pixels using an image or gradient and can produce soft, partially transparent edges. A clip is a hard geometric boundary: a pixel is either inside the shape or outside it. Browsers antialias the boundary, so a diagonal edge does not look jagged, but there is no gradient falloff available from clip-path alone.
Because the clipped region is geometry rather than pixels, clip-path stays crisp at any zoom level and on any display density, and it costs nothing in bandwidth. A hexagonal avatar built with clip-path is one line of CSS instead of a transparent PNG per size.
Reading a polygon value point by point
A polygon is a list of vertices in order, each written as an x y pair. The hexagon preset in this tool produces clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%). Read it as six coordinates walked clockwise: start a quarter of the way along the top edge, move to three quarters along the top, out to the right middle point, down to three quarters along the bottom, back to a quarter along the bottom, and finally to the left middle point. The browser closes the shape automatically by joining the last point back to the first.
Percentages are resolved against the element's own border box, so 0% 0% is the top left corner and 100% 100% is the bottom right. That is what makes percentage polygons responsive: the same hexagon holds its proportions whether the element is 80 pixels wide or 800. You can mix units freely, as in polygon(0 0, 100% 0, 100% calc(100% - 24px), 0 100%), which is the usual way to cut a fixed-height diagonal off the bottom of a full-width section.
Two vertex lists animate into each other only when they have the same number of points. A triangle written as polygon(50% 0%, 0% 100%, 100% 100%) will not transition smoothly to a pentagon, but it will transition to another three-point polygon. The common trick is to write the simpler shape with duplicate coordinates so both keyframes carry the same point count.
The other shape functions: inset, circle, ellipse and path
inset() takes up to four edge offsets in the familiar top right bottom left order and optionally a corner radius after the keyword round. The preset inset(10% round 20px) trims ten percent off every side and rounds the remaining rectangle by twenty pixels. It is the cheapest way to get a rounded clip that also affects overflowing children, which plain border-radius does not always do.
circle() and ellipse() take radii followed by a position. circle(50% at 50% 50%) inscribes a circle in the element, and ellipse(40% 25% at 50% 50%) gives separate horizontal and vertical radii. For circle() a percentage radius is resolved against a diagonal-derived reference length rather than the width, which is why a circle on a non-square element is still a circle rather than a squashed oval.
path() takes an SVG path string and therefore supports curves, as in the heart preset path("M50,90 C10,60 0,30 25,15 C40,7 48,20 50,25 C52,20 60,7 75,15 C100,30 90,60 50,90 Z"). Its one significant limitation is that path() coordinates are absolute user units, not percentages, so the shape does not scale with the element. If you need a curved clip that resizes, reach for an SVG clipPath element referenced by clip-path: url(#id) with clipPathUnits set to objectBoundingBox.
Practical limits worth knowing before you ship
Clipping removes the visual result of box-shadow, outline and border on the clipped-away edges, because those are painted as part of the element and then cut. To get a shadow around a clipped shape you have to apply filter: drop-shadow() to a wrapper element, which follows the alpha channel of the clipped result rather than the box.
Text inside a clipped element is still text: it is selectable, searchable and read by screen readers even where it is hidden by the clip. If a corner of a heading is cut off, sighted users lose it while assistive technology still announces it, so keep important content well inside the visible region rather than relying on the clip to trim overflow.
Support for the basic shape functions is broad across current browsers. path() arrived later than polygon() and inset(), and animating between different shape function types, such as circle() to polygon(), is not interpolable anywhere. When in doubt, keep both ends of an animation in the same function with the same argument count.