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 tool 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.

How CSS clip path works: a shape 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.

Polygon coordinates explained with a real clip-path 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.

That's polygon coordinates explained in miniature: 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, which is exactly why the CSS Clip Path Generator lets you drag the points on a live preview and copy the finished list.

Responsive clip paths: why percentages beat pixels

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. That's the whole recipe for responsive clip paths: describe the shape relative to the box, not in absolute units.

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. Unless you need those curves, convert paths to percentage polygons and stay flexible.

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. It costs one duplicated line and prevents a blank shape on legacy iOS.
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.

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 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.