What's the difference between clip-path and border-radius?

`border-radius` rounds the corners of a rectangle - it's still a rectangle underneath. `clip-path` replaces the rectangle with any polygon (or circle, ellipse, or even an SVG path) and hides everything outside it. Use border-radius for rounded cards; use clip-path when the shape isn't a rounded rectangle - triangles, hexagons, arrows pointing into a tooltip, ribbon corners, etc.

Does clip-path affect layout?

No. The element keeps its original box for layout purposes - margins, borders and following content position as if the clip wasn't there. Hover and click areas also keep the original rectangle by default, which can be surprising: a triangle-clipped button still triggers hover when the user is in the empty corner. Add `pointer-events` rules or wrap the visible shape in an SVG if you need hit testing to follow the clip.

Can I animate the clip-path?

Yes, but only between paths with the same number of points - the browser can interpolate `polygon(0 0, 100% 0, 50% 100%)` into another 3-point polygon, but not into a 4-point polygon. The same goes for `circle()` and `ellipse()`: same shape function, different parameters animate; mixing shape functions does not. For complex morphs use SVG path animation libraries instead.

Why is my clip-path cutting off the border?

Borders are inside the clip, so a thick border on a triangle-clipped div gets cut along the diagonals. Two fixes: use an SVG with a `stroke` attribute (clean, scales well), or use a `filter: drop-shadow()` with a small spread instead of a border (clip-aware shadow follows the visible shape).

`clip-path: polygon(...)` and basic shapes (`circle`, `ellipse`, `inset`) are supported in every modern browser. Path-based clips (`path('...')`) need Chrome 88+, Safari 13.1+, Firefox 97+. The SVG ` ` element is a portable fallback for older browsers and supports paths everywhere.

Générateur clip-path CSS

Créez des clip-paths visuellement - triangle, hexagone, étoile, bulle de message - avec aperçu en direct et CSS prêt à copier.

Fonctionne dans votre navigateur

Choisissez un préréglage, voyez le clip s'appliquer en direct sur une image d'exemple, copiez le CSS. Les points du polygone sont listés sous l'aperçu - ajustez les pourcentages à la main si un préréglage approche sans être parfait. Basculez le fond entre image, couleur unie et dégradé : le clip-path n'ajoute ni contour ni anti-aliasing, le contraste avec le fond environnant compte.

Préréglages

Points du polygone (x% y%, séparés par virgules)

CSS

clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);

Aperçu

Comment l'utiliser

Pick a preset
Triangle, rhombus, pentagon, hexagon, octagon, star, arrow, message, cross, ticket - one click loads the polygon.
Tune the points
Edit the percentage coordinates below the preview to fine-tune. The shape updates live as you type.
Test the background
Toggle between an image, a solid colour and a gradient to confirm the clipped shape reads against the kinds of surfaces it'll sit on.
Copy the CSS
The full `clip-path: polygon(...)` declaration is ready to paste into your stylesheet.

Qu'est-ce que c'est ?

A CSS clip-path generator builds the `clip-path` CSS property visually. The most common form is `polygon(x1 y1, x2 y2, ...)` - a list of percentage coordinates that define the visible region of the element; everything outside the polygon is hidden. Other shape functions (`circle()`, `ellipse()`, `inset()`, `path()`) cover round and arbitrary shapes. The result is GPU-accelerated and animatable between same-shape variants.

Quand l'utiliser

Hexagonal avatar grids, ribbon corners on cards, triangle pointers on tooltips and chat bubbles, diagonal-cut hero sections, ticket-stub shapes for offers, star ratings rendered as clipped solid fills, message bubbles, slanted dividers between page sections, and SVG-free icon backgrounds.

Erreurs courantes

Forgetting that clip-path doesn't change the element's hit area - users can click the empty triangular corner and still trigger the button. Trying to animate between polygons of different point counts and getting an instant jump instead of an interpolation. Applying clip-path to an element with a thick border and being surprised when the border gets sliced. Using percentages without locking the aspect ratio - a triangle on a wide element flattens into a sliver.

FAQ

What's the difference between clip-path and border-radius?: `border-radius` rounds the corners of a rectangle - it's still a rectangle underneath. `clip-path` replaces the rectangle with any polygon (or circle, ellipse, or even an SVG path) and hides everything outside it. Use border-radius for rounded cards; use clip-path when the shape isn't a rounded rectangle - triangles, hexagons, arrows pointing into a tooltip, ribbon corners, etc.
Does clip-path affect layout?: No. The element keeps its original box for layout purposes - margins, borders and following content position as if the clip wasn't there. Hover and click areas also keep the original rectangle by default, which can be surprising: a triangle-clipped button still triggers hover when the user is in the empty corner. Add `pointer-events` rules or wrap the visible shape in an SVG if you need hit testing to follow the clip.
Can I animate the clip-path?: Yes, but only between paths with the same number of points - the browser can interpolate `polygon(0 0, 100% 0, 50% 100%)` into another 3-point polygon, but not into a 4-point polygon. The same goes for `circle()` and `ellipse()`: same shape function, different parameters animate; mixing shape functions does not. For complex morphs use SVG path animation libraries instead.
Why is my clip-path cutting off the border?: Borders are inside the clip, so a thick border on a triangle-clipped div gets cut along the diagonals. Two fixes: use an SVG with a `stroke` attribute (clean, scales well), or use a `filter: drop-shadow()` with a small spread instead of a border (clip-aware shadow follows the visible shape).
Browser support?: `clip-path: polygon(...)` and basic shapes (`circle`, `ellipse`, `inset`) are supported in every modern browser. Path-based clips (`path('...')`) need Chrome 88+, Safari 13.1+, Firefox 97+. The SVG `<clipPath>` element is a portable fallback for older browsers and supports paths everywhere.