demo · v135
Text wrap flow
Use shape-outside: shape(...) to make body text wrap around a non-rectangular float — an arrowed diamond, an arch, or a notched rectangle — defined entirely in CSS. The text follows the contour the engine computes at responsive sizes.
Float shapes are an old idea, but for a long time the only way to make text wrap around a non-rectangular silhouette was to slice an image with a transparent alpha channel and ask the engine to read the outline. The shape-outside property eventually let us drop the image, but only for a fixed set of basic shapes: circle(), ellipse(), polygon(), and an SVG path() with absolute pixel coordinates.
Chrome 135 brings the shape() function to shape-outside in addition to clip-path, which means responsive curves are finally first-class. The diamond above is composed of four line segments using percentage coordinates. Switch to the arch and the text re-wraps around a true semicircle that grows and shrinks with the float’s box. Switch to the notch and a sharp clipped corner takes over — the same geometry you used to need an image for.
Pair this with view-transition-name on the floated element and you can animate the silhouette as the user navigates — one of the harder editorial layouts to pull off without a designer signing off on a static asset.