Web layouts are rectangles all the way down, which is exactly why a hexagonal avatar or a slanted section edge catches the eye: someone broke the grid on purpose. The property doing the breaking is clip-path, which cuts any element to any shape with one line of CSS, no images, no SVG files, no transparent PNGs. This guide covers the shapes worth knowing, the coordinates behind them, and the two behaviors that surprise people, with our free clip-path generator drawing the polygons so you do not have to plot points by hand.
In this guide
What clip-path actually does
Clip-path hides every pixel of an element outside a shape you define. The crucial word is hides: the element’s layout box does not change, so surrounding content still flows around the original rectangle, not around the visible shape. Clipping a square image to a triangle leaves a triangle floating in the same square hole the image always occupied. That makes clip-path a purely visual instrument, which is also its strength: the underlying element keeps its size, its position and its accessibility exactly as before, and removing the clip restores everything, since no pixels were harmed in the making of the shape.
The basic shapes: circle, ellipse, inset
Three named functions cover the gentle cases. circle(50%) is the instant round avatar from any square image, with an optional position for off-center crops: circle(40% at 60% 35%) keeps a face that sits high in the frame. ellipse() is the same idea with separate radii, suiting wide elements. inset(10% 5% 10% 5% round 16px) trims from the four edges with optional rounded corners, the underrated one of the three: it crops an element’s edges without touching the file, useful when a screenshot carries junk at its borders. For rounded rectangles alone, plain border-radius remains the right tool; clip-path earns its keep where border-radius cannot follow, which is everything below.
Polygons: hexagons, arrows, triangles
polygon() takes corner coordinates as x-y pairs, percentages of the element’s box, and draws straight lines between them. The classics:
- Triangle:
polygon(50% 0%, 0% 100%, 100% 100%), three corners, top center then bottom two. - Hexagon:
polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%), the flat-top badge shape of every gaming profile and crypto avatar. - Arrow tag:
polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%), a rectangle whose right edge comes to a point, the breadcrumb and price-tag shape. - Chevron: the same arrow with a notch cut into its left edge by adding
25% 50%as a final point, so the shapes nest into one another in a process strip.
Reading coordinates as “percent across, percent down” makes the patterns legible: the hexagon is symmetric because 25/75 mirror around the center and the side points sit at exactly 50% height. Past five or six points, plotting by eye in the generator beats arithmetic, and dragging a vertex teaches the coordinate system faster than any table of numbers.
Section dividers: the slanted edge
The most production-valuable clip-path is the least flashy: a full-width section whose bottom edge runs at a slight diagonal instead of a hard horizontal line. polygon(0 0, 100% 0, 100% 85%, 0 100%) keeps the top edge straight and tilts the bottom from 85% on the right down to 100% on the left, and two such sections in sequence produce the angled-stripe page rhythm that modern landing pages run on. The craft detail: keep the slant shallow, a 10 to 15 percent drop across the full width, because steep diagonals eat real estate and make text columns ragged against the cut. Used this way, clip-path replaces an entire generation of diagonal background images and their responsive headaches, since percentages scale with the section automatically.
The two surprises: clicks and distortion
Surprise one is pleasant: hit-testing follows the shape. Clicks and hovers outside the clipped region pass through to whatever sits beneath, so a hexagonal button is genuinely hexagonal to the cursor, not a rectangle pretending. This is behavior border-radius users already know from rounded corners, extended to any polygon.
Surprise two is the gotcha: percentage shapes stretch with their box. A hexagon defined in percentages is only a regular hexagon in a box with the right proportions; let the element render wider and the hexagon flattens, taller and it pinches, and the distorted badge ships because every test happened at one viewport size. The fix is locking the box’s proportions with the aspect-ratio property, computed for any target shape by the aspect ratio calculator; with the ratio pinned, the percentages mean the same thing at every size. The rest of the shape-and-style toolbox lives in the CSS generators pillar.
Frequently asked questions
Can clip-path shapes be animated?
Yes, and smoothly, with one rule: both polygons must have the same number of points, because the browser interpolates vertex to vertex. Designers add invisible extra points to the simpler shape to match counts, which is the standard trick behind morphing buttons and reveal transitions.
Why does text not wrap around my clipped shape?
Because clipping is visual only; the layout box stays rectangular. Text flow around a shape is a different property, shape-outside, which only works on floated elements and is commonly used together with a matching clip-path so the visible shape and the wrap shape agree.
Does clip-path work on video and iframes?
On any element, including video, canvas and iframes, which is where it gets fun: a circular live video or a hexagonal map embed costs one declaration. The clipped areas simply do not render, and playback performance is unaffected in current browsers.
What happens in browsers that do not support a shape?
An unsupported or invalid clip-path is ignored and the full rectangle shows, content intact. That makes the property safe progressive enhancement: design so the unclipped rectangle is acceptable, and the shape becomes a bonus rather than a dependency.