clip-path and shape-outside: Text That Flows Around Actual Shapes

Rectangles are a rendering-engine convenience, not a design requirement. Two properties break the tyranny: clip-path changes what part of an element is visible, shape-outside changes how text flows around it.

clip-path: the visible region

/* The slanted hero bottom that every landing page wants */
.hero {
    clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%);
}

/* Circle crop without border-radius side effects */
.avatar { clip-path: circle(50%); }

/* Notched "ticket" card */
.ticket {
    clip-path: polygon(0 0, 100% 0, 100% 40%, 96% 50%, 100% 60%, 100% 100%, 0 100%,
                       0 60%, 4% 50%, 0 40%);
}

Percentages make shapes responsive by default. Versus border-radius for circles: clip-path also clips box-shadow and borders (sometimes desired, sometimes not) and - the practical difference - clipped areas don't capture pointer events, so weird-shaped buttons hit-test correctly on the visible shape.

The animation trick everyone asks about

.reveal {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}
.reveal.shown {
    clip-path: inset(0 0 0 0);      /* wipes in from the left */
}

clip-path interpolates smoothly between shapes of the same type and point count - inset-to-inset wipes, polygon morphs, growing circle spotlights (circle(0% at 90% 10%) → circle(150% at 90% 10%) is the classic menu-open effect). It's GPU-friendly and doesn't trigger layout, unlike animating width.

shape-outside: the text-wrap half nobody uses

img.portrait {
    float: left;
    width: 240px;
    shape-outside: circle(50%);       /* text hugs the circle, not the bounding box */
    clip-path: circle(50%);           /* make the crop match what text avoids */
    margin: 0 1.5rem 1rem 0;
}

Floated elements normally repel text with their rectangular box; shape-outside substitutes a real geometry - circle, ellipse, polygon, or even the alpha channel of an image (shape-outside: url(portrait.png) wraps text around the actual pixels, with shape-margin for breathing room). Magazine pull-quotes and author-bio portraits get genuinely print-like. Note it only applies to floats, which is fine: this is what floats are still for.

Notes from use

• Slant clipping crops content: pad the clipped side so text doesn't fall into the cut.
• Firefox's DevTools has a visual shape editor (click the shape icon next to the property) - by far the sanest way to author polygons.
• Support: universal for the basic shapes and url() shapes; offset-path/shape() innovations are arriving but the recipes above have worked everywhere since ~2020.

Neither property is exotic anymore - they're just underused. A slanted divider and one circular text-wrap per site is the tasteful dose.