Clip a page element into a shape with CSS
Hexagon avatars, angled section edges, diamond photos — clip-path does it without image editing. Build the shape, copy the CSS.
Tools used in this guide
The job
clip-path cuts an element's rendered box into a shape — circle, ellipse, inset rectangle, or arbitrary polygon — with no masking images. The builder shows the clip on a live swatch while you tune it.
Pick a mode
Preset shapes cover triangles, arrows, and stars; circle/ellipse take radii; inset crops a rectangle with optional rounded corners; polygon takes x y percentage points, 3–24 of them.
Worked example
A right-pointing banner: polygon points 0 0 / 85 0 / 100 50 / 85 100 / 0 100 — five points produce a chevron. Clip 20 % off each side with inset(0 20% round 8px) for a lozenge with soft corners.
Where it stops
Percentages relative to the element — resize the element and the shape rescales. Clipped regions still occupy layout space (the box does not shrink); no path(), shape(), or animation keyframes here.