Shapely CSS Shapes

Here is some text which will nicely wrap around floated elements, but only if you're using the latest Blink/WebKit browsers, which support the new CSS Shapes Specification, Level 1. CSS Shapes are currently a W3C Candidate Recommendation. Chrome and Opera now support it prefix-free (so this pen will work), add -webkit- to gain support in the latest Safari.

Hover this page to see the actual shapes used to define the area of each float.

Of course, it's not magic, it's web design, so there are plenty of gotchas and complications to work around. For starters, Chrome's layout algorithm occasionally results in text flowing into the shape area…

This is filler text; more filler text. Some filler text again. Filler text; more filler text. Filler text; more filler text. Some filler text again. Filler text; more filler text. Filler text; more filler text. Filler text; more filler text. Some filler text again. Filler text; more filler text. Filler text; more filler text. Some filler text again. Filler text; more filler text. Filler text; more filler text. Filler text; more filler text. Some filler text again. Filler text; more filler text. Filler text; more filler text. Filler text; more filler text. Some filler text again. Filler text; more filler text. Filler text; more filler text. Filler text; more filler text. Filler text; more filler text. Filler text; more filler text. Some filler text again. Filler text; more filler text. Filler text; more filler text. Filler text; more filler text. Some filler text again. Filler text; more filler text. Some filler text again. Filler text; more filler text.

Lightbulb image by YassineMrabet via Wikimedia Commons (CC-BY-SA).