CSS Clip-Path: 10 Copy-Paste Examples with Live Previews

CSS Clip-Path: 10 Copy-Paste Examples with Live Previews

The CSS clip-path property cuts any HTML element into a custom shape: triangles, hexagons, diagonal sections, notched cards, animated reveals. No images, no SVG files, no extra markup. This guide gives you 10 production-ready examples, each with a live preview rendered right on this page and the exact CSS to copy. Every shape here can also be built visually, by dragging points, with our free CSS Clip-Path Generator.

Syntax in 30 seconds

clip-path accepts four basic shape functions. Coordinates are percentages of the element box, so shapes scale with the element:

clip-path: polygon(50% 0%, 100% 100%, 0% 100%);  /* any shape from (x y) points */
clip-path: circle(40% at 50% 50%);               /* radius at center */
clip-path: ellipse(50% 35% at 50% 50%);          /* rx ry at center */
clip-path: inset(10% 20% 10% 20% round 16px);    /* rectangle with offsets */

Everything inside the shape stays visible, everything outside disappears. The element keeps its original layout box: surrounding content does not reflow, and clipped areas do not receive clicks.

1. Triangle

The hello world of clip-path: three points, one per corner.

.triangle {
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

2. Arrow banner

A label with a pointed end, useful for tags, ribbons and step indicators.

.arrow-banner {
  clip-path: polygon(0 0, 75% 0, 100% 50%, 75% 100%, 0 100%);
}

3. Hexagon avatar

Apply it directly to an img for hexagonal profile pictures, no wrapper needed.

.hexagon {
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%,
                     75% 100%, 25% 100%, 0% 50%);
}

4. Diagonal hero section

The classic slanted bottom edge for hero sections. Percentages keep the angle proportional on every screen width.

.hero-diagonal {
  clip-path: polygon(0 0, 100% 0, 100% 75%, 0 100%);
}

5. Star badge

A five-point star from a single polygon. Handy for ratings, badges and promo stickers.

.star {
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%,
    68% 57%, 79% 91%, 50% 70%, 21% 91%,
    32% 57%, 2% 35%, 39% 35%);
}

6. Notched card

A corner cut that reads as "ticket" or "cyberpunk UI". calc() keeps the notch a fixed size regardless of card dimensions.

.notched-card {
  clip-path: polygon(0 0, calc(100% - 24px) 0,
                     100% 24px, 100% 100%, 0 100%);
}

7. Circle reveal on hover

clip-path animates smoothly between two values of the same shape type. Hover the preview:

.reveal {
  clip-path: circle(25% at 50% 50%);
  transition: clip-path 0.4s ease;
}
.reveal:hover {
  clip-path: circle(75% at 50% 50%);
}

8. Speech bubble

A message bubble with a tail, from a single element. The tail lives in the bottom 25% of the polygon.

.speech-bubble {
  clip-path: polygon(0% 0%, 100% 0%, 100% 75%,
    30% 75%, 15% 100%, 15% 75%, 0% 75%);
}

9. Chevron breadcrumb

Both ends angled: chain several with a small negative margin for a breadcrumb or pipeline UI.

.chevron {
  clip-path: polygon(0 0, calc(100% - 16px) 0,
    100% 50%, calc(100% - 16px) 100%,
    0 100%, 16px 50%);
  margin-left: -12px; /* overlap the previous step */
}

10. Polygon morph on hover

Two polygons with the same number of points interpolate smoothly. This square morphs into an octagon. Hover it:

.morph {
  /* square written with 8 points */
  clip-path: polygon(0 0, 50% 0, 100% 0, 100% 50%,
    100% 100%, 50% 100%, 0 100%, 0 50%);
  transition: clip-path 0.4s ease;
}
.morph:hover {
  /* octagon, same 8 points */
  clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%,
    70% 100%, 30% 100%, 0 70%, 0 30%);
}

Browser support and gotchas

Clip-path vs mask, and the wave question

clip-path is binary: a pixel is fully visible or fully hidden. mask supports transparency gradients and image-based masking, at the cost of more complexity. For sharp geometric cuts, clip-path wins on simplicity and animation.

One thing polygons cannot do well: smooth curves. A "wave" divider built with clip-path is really a series of straight segments and looks jagged up close. For hero waves and curved section dividers, generate a real SVG path with Bezier curves using our SVG Wave Generator: it weighs under 1 KB and scales perfectly.

Conclusion

Ten shapes, zero images, zero extra markup. Copy the snippets above as starting points, then fine-tune the coordinates visually in the Clip-Path Generator: it exports clean CSS for polygon, circle, ellipse and inset shapes, and lets you preview the clip on your real images before shipping it.