CSS Clip-Path Generator

You need a hexagonal card, an arrow, or a notched corner, and writing a polygon() coordinate pair by coordinate pair is nobody's idea of fun. This page covers the common cases: pick one of nineteen preset shapes, from triangle and star to chevron and speech bubble, watch the cut applied to a sample square, and copy the CSS with clip-path and -webkit-clip-path already filled in.

Polygons come out with percentage coordinates, so the same shape works on a 40px avatar and a full-width banner without edits. Worth knowing: the clipping is only partly cosmetic. The element still occupies its original rectangle in the layout, but the clipped-away area stops receiving clicks. Circle, ellipse and inset get their own sliders for radius and margins; inset also supports rounded corners, which the tool emits using the round keyword.

There is no vertex dragging or point-by-point polygon editing here: the tool works from presets. If a shape needs fine-tuning, copy the code and edit the percentage pairs directly in your CSS; the format is perfectly readable. Also note the cut removes everything the element paints, including box-shadow; for a shadow that follows the shape, use filter: drop-shadow() on a parent element. Everything runs in your browser, nothing is uploaded.