A Redesign with CSS Shapes

Avatar of Chris Coyier
Chris Coyier on

Find and fix web accessibility issues with ease using axe DevTools Pro. Try for free!

CSS Shapes is like the perfect example for progressive enhancement these days. Kinda like border-radius was. Older browsers have square corners! Who cares! CSS Shapes allow you to wrap text irregularly – like along the path of a circle().

Eric Meyer uses it on a production page and shows how it works. Here’s some code I snagged from the CSS on the site itself showing it only being applied on large screens with support:

@media only screen and (min-width: 720px) {

  @supports (shape-outside: circle()) {

    .single-page article .complex-content img.right {
      shape-outside: circle(150px at 170px 130px);
    }

  }

}

Jen Simmons has a bunch of great demos of this as well. Looks like shape-outside supports circle(), ellipse(), polygon(), and url() but not path() yet.

Direct Link →