CSS Clip-Path & Shapes: Complete Guide

What Is clip-path?

The CSS clip-path property defines a clipping region. Anything inside is visible; everything outside is hidden. Unlike overflow: hidden, clip-path creates complex non-rectangular shapes.

Clip-path accepts polygon(), circle(), ellipse(), inset(), and path(). Common uses: decorative section dividers, custom image shapes, reveal animations, and creative hero sections.

Basic Shape Functions

inset() creates rectangular clips with optional rounded corners. circle() creates circular clips by radius and center. ellipse() creates oval clips with separate horizontal and vertical radii.

circle(50%) creates a perfect circle centered on the element. ellipse(50% 30%) creates a wide, short ellipse.

Polygon Deep Dive

polygon() is the most versatile. It accepts coordinate pairs defining vertices. The browser connects vertices with straight lines. Top-left is 0% 0%, bottom-right is 100% 100%.

Complex shapes — stars, chevrons, hexagons — require more vertices. The Clip-Path Maker plots vertices visually and generates the coordinates automatically.

Section Dividers

Diagonal dividers use polygon on the section element. Apply complementary angles to adjacent sections for seamless zigzag flow.

Wave dividers use SVG positioned absolutely at the section bottom. The SVG Wave Generator creates these with adjustable amplitude and frequency.

Image Masking

Clip-path on images creates non-rectangular crops without image editing. Circle clips for headshots, diamond clips for portfolio grids — all in CSS, all reversible.

Unlike border-radius: 50%, clip-path creates true shape masks on any aspect ratio. Hover transitions between shapes animate smoothly.

Animating Clip Paths

Same-type clip-path values animate automatically. polygon() to polygon() works if both have the same vertex count. circle(0%) to circle(100%) creates a circular wipe reveal.

For smooth polygon transitions, pad simpler shapes with duplicate vertices to match the more complex shape's vertex count.

Responsive Clip Paths

Percentage-based values are inherently responsive. A polygon diagonal maintains the same angle at any viewport width.

Test on narrow screens. A dramatic diagonal at 1440px might clip important content at 320px. Use media queries to adjust.

Best Practices

Content outside the clip region is hidden but still occupies layout space. Use clip-path for visual shaping, not hiding content.

Provide visual fallbacks for maximum compatibility. A rectangular version that still looks good without clip-path.