clip-path in CSS: custom responsive shapes without images

The clip-path property cuts an element as if it went through scissors: everything outside the defined shape becomes invisible. Unlike a transparent PNG, the shape lives in CSS, adds zero extra bytes and can resize with the element. It is the right tool for diagonal heroes, polygonal avatars, hexagonal cards and dozens of compositions that used to require SVG or cropped images.

The three basic functions

clip-path accepts several shape functions; these three cover 95% of use cases:

.polygon {
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}
.circle {
  clip-path: circle(40% at 50% 50%);
}
.ellipse {
  clip-path: ellipse(60% 40% at 50% 50%);
}

• polygon() takes a list of X% Y% vertices. The browser connects them in order and automatically closes the figure between the last and first points.
• circle() defines radius and center. The radius also accepts fixed units (px) or closest-side / farthest-side.
• ellipse() the same but with two independent radii for the horizontal and vertical axes.

Why percentages (not pixels)

This detail turns trivia into an architecture decision: if you define vertices in percentages, the shape adapts to the element's size at every moment. A polygon(0% 0%, 100% 0%, 100% 85%, 0% 100%) produces a diagonal cut on a 300px card, on a 1400px banner and at any size in between.

With pixels you get exactly the opposite: the shape freezes and breaks when the element resizes. For responsive designs, percentages always.

How to build a polygon by hand

The mental workflow is thinking in coordinates over a canvas where (0%, 0%) is the top-left corner and (100%, 100%) the bottom-right. A five-pointed star, for example:

.star {
  clip-path: polygon(
    50% 0%, 63% 36%, 98% 36%, 71% 57%,
    81% 94%, 50% 74%, 19% 94%,
    29% 57%, 2% 36%, 37% 36%
  );
}

Ten vertices because a five-pointed star alternates outer and inner: tip, valley, tip, valley... Doing this by hand requires computing sines and cosines or drawing on graph paper. This is precisely the work a visual editor automates: drag the points and copy the result.

Animating between shapes

A little-known capability: if two polygons have the same number of vertices, you can interpolate them with transition:

.shape {
  clip-path: polygon(10% 10%, 90% 10%, 90% 90%, 10% 90%);
  transition: clip-path 0.4s ease;
}
.shape:hover {
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%);
}

Both have four vertices, so the browser smoothly animates from rectangle to diamond. If the point count differs, the change is instant and jarring. Common trick: add duplicated or nearly-coincident vertices to the simpler shape until counts match.

Use cases that actually add value

Diagonal section cuts: the classic hero whose bottom edge is slanted rather than horizontal. Two displaced vertices are enough.

Geometric avatars and badges: hexagons or octagons to stand out from the usual circular avatar, without generating a single image.

Cards with notches: combining a polygon with inner vertices creates "ticket" or "tag" style cutouts.

Scroll reveal: animating clip-path: inset() to progressively uncover an image while scrolling (here inset() is genuinely useful because its values are distances).

Compatibility and fine print

clip-path with basic shape syntax has worked in all modern browsers for years (Safari needed the -webkit- prefix until version 9.1). Three practical warnings:

1. Content outside the clip stops being interactive. If you clip a button, the invisible zone no longer captures clicks — usually desired, but keep it in mind with concave shapes.
2. box-shadow gets clipped along with the element. The shadow lives "outside" the border, so a clipped element loses its shadow unless you apply it to a parent container.
3. Do not confuse it with mask. clip-path cuts with a solid shape; mask allows gradient or image masks (smooth opacity transitions inside the cutout).

Design your shapes by dragging points

Writing polygons by hand is coordinate archaeology. Our Clip Path Maker gives you a canvas with draggable points, ten presets (triangle, hexagon, star, arrow, speech bubble...), circle and ellipse modes, plus buttons to add or remove vertices. Copy the final percentage-based clip-path and it works at any size.

FAQ

Does clip-path replace cropped images? On performance and flexibility, yes: zero network requests, perfect scaling and editable from DevTools. You only need real cropped images when the shape has soft edges or complex antialiasing.

Can I combine multiple shapes? Not directly in one declaration, but you can nest elements with different clip-path values or use self-intersecting polygons (they produce clipped zones according to the evenodd rule).

Does it work with video or iframes? Yes, clip-path applies to any rendered element, including embedded <video> and iframes.

Design your shape visually with the Clip Path Maker, drag the points and copy the resulting CSS.