Blob
CSS Clip-Path Shapes Library
Ten clip-path shapes as responsive percentage polygons — arrows, stars, hexagons, badges and friends, each one a single copy-paste CSS rule that scales with whatever element you clip. Percentage polygons are the practical way to ship clipped shapes: unlike pixel-locked paths they stretch with your layout, and unlike images they cost zero requests. Copy a shape below or open it in the clip-path studio to drag its points.
Clip-paths shine where border-radius runs out: image crops that are not rectangles, call-to-action arrows, section badges, avatar frames. The clipped element keeps its layout box — only the paint is cut — so these drop into existing components without reflowing anything around them.
One habit worth keeping: apply the clip to a wrapper rather than the content element itself, so text padding can keep the safe distance from the cut edges. And remember hover states still follow the clipped region — arrows and chevrons become naturally shaped click targets.