CSS Generators·4 min read

How CSS Clip Path Works: Polygon Shapes and Masks

A rectangle is the default shape of the web, and clip-path is the cheapest way out of it. Once you understand how CSS clip path works, section dividers, angled heroes, and masked portraits stop being image-editor jobs and become one-line declarations. The property cuts an element to a shape you describe with coordinates; everything outside the shape simply isn't painted. No extra markup, no exported PNGs. This article walks the polygon syntax point by point, shows why percentages keep shapes responsive, and lists the mistakes that make clipped sections misbehave in production.

Open the free CSS Clip Path Generator All insights

Where clip-path earns its keep

Shapes without image files.

Marketing sites lean on it hardest: the slanted joint between a colored hero and the white section below it is almost always a clip-path, not a background image. Team pages use hexagonal portraits. Dashboards use arrow-shaped step indicators. E-commerce cards use notched corners that a border-radius can't draw.

The alternative used to be exporting each divider as an SVG or PNG per breakpoint and per background color. With clip-path the shape lives in CSS, recolors with the element, and scales with the layout for free.

The shape functions, drawn on a 100 percent canvas

The property accepts a shape function, and polygon() is the one you'll use most. It takes a comma-separated list of x y coordinate pairs, measured from the element's top-left corner, and connects them in order before closing the loop back to the first point. Whatever falls inside the loop stays visible; the rest vanishes.

Four more functions cover the curved and boxy cases: circle() and ellipse() for round crops, inset() for rectangular trims with optional rounded corners, and path() for raw SVG data. Polygon does the heavy lifting because straight-edged shapes are what section dividers and badges actually need.

Reading polygon coordinates in a real divider

Four points, one slanted section.

Here's the classic angled section bottom: clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);. Read the points in order: top-left corner (0 0), top-right corner (100% 0), then down the right edge to 85% of the height (100% 85%), then across to the bottom-left corner (0 100%). Connecting the last two points draws a diagonal, and the triangle beneath it disappears.

Each pair is just "how far right, how far down". A hexagon is the same idea with six pairs: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%). Sketching these by hand gets old fast. The CSS Clip Path Generator has 16 presets, the hexagon included, that load as editable points; drag the handles, click a + dot to add a point, Alt-click to remove one, and turn on Snap to grid or type exact values under Edit points by number.

Why percentages beat pixels for responsive shapes

Coordinates in percentages are measured against the element's own box, so the shape stretches with it. The divider above keeps its proportions on a 320px phone and a 1440px desktop without a media query. Describe the shape relative to the box, not in absolute units, and it stays responsive.

The exception is path(), which takes SVG path data in pixels. It can draw curves polygon can't, but the shape is welded to one specific size; on a wider element it just sits in the corner. The generator's Import SVG button handles this for you: it samples the path into a percentage polygon you can edit, and keeps a path() option for when you need the exact curve at a fixed size.

Clip-path mistakes that surface in production

The property is simple; the surprises are in the details around it:

The clipped area still occupies layout space. Cutting the bottom off a hero leaves a transparent gap unless the next section overlaps it with a negative margin.
Text near an angled edge gets sliced mid-letter. Pad the content away from any edge the polygon cuts through.
Box-shadow vanishes with the clip. Shadows are drawn on the original box and get cut off; use filter: drop-shadow() on a wrapper if you need depth.
Older Safari needs the -webkit-clip-path prefix. Copy full CSS in the generator writes both lines, and current browsers simply ignore the extra one.
Percentage slants steepen on tall, narrow elements. A cut at 85% height is subtle on a wide hero and aggressive on a mobile card; check both.

Clip-path tips from shipped projects

Keep the point count identical if you plan to animate between two polygon shapes. Browsers can only transition polygons with matching point counts, so build the "before" and "after" from the same list with points moved, not added.

For section dividers, put the clip on the upper section and pull the lower one up with a negative margin equal to the slant's height. The two layers meet along the diagonal with no seam, and the background underneath shows through the cut exactly where you expect.

For logos and icons, try Trace PNG before drawing points by hand. It reads the transparency of a PNG, outlines the largest solid area, and simplifies it into a polygon, with a detail slider that trades point count against accuracy. Bold silhouettes trace cleanly; detailed illustrations need many points.

Clip-path or a different shaping tool

Match the tool to the edge. Straight lines and hard angles are clip-path territory. Soft, curved corners belong to the CSS Border Radius Generator, which stays easier to tweak and keeps box-shadow working normally. Full illustrations with many compound curves are better served as backgrounds: run the artwork through the SVG to CSS Converter and let clip-path handle geometry instead of art.

A useful test: if you can describe the shape by naming its corners, clip it. If you'd have to describe it with curves, it probably wants radius or an SVG. And when you need the clipped result as an image rather than CSS, the generator's PNG button saves the preview through the current shape with a transparent background.