Common Clip-Path Shapes for Web Design: Diagonals, Hexagons, and More

Diagonal Section Dividers

clip-path: polygon(0% 0%, 100% 0%, 100% 85%, 0% 100%);

A section with one edge cut at an angle instead of a flat horizontal line — a widely used pattern for breaking up an otherwise flat, stacked layout of full-width sections, adding a bit of visual dynamism between them.

Hexagonal Image Crops

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

A six-sided shape often used for profile images, team member photos, or icon frames — a distinctive alternative to the far more common circular or square crop.

Chevron / Arrow Shapes

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

An arrow-like shape, commonly used for "next" navigation indicators, process step indicators, or directional callouts.

Ribbon / Badge Shapes

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

A shape with a notched or pointed bottom edge, resembling a ribbon or ceremonial badge — commonly used for "featured," "best seller," or achievement-style labels.

Starting From a Preset

Rather than plotting every point from scratch, starting from a known preset shape and adjusting individual points to fit your specific design is usually faster and less error-prone than building a complex polygon entirely from a blank canvas.