CSS Shape Editors

I enjoy using shape-outside as it can add real visual interest to a page that isn’t nearly overdone or trendy just yet. Plus, in a lot of cases, it doesn’t matter whether it’s supported because the float behaves as a rectangle. If it causes major issues, you can wrap things in an @supports block and do something different.

@supports (shape-outside: circle(50%)) {
  img {
    /* Only round the image if we can float around it too, otherwise leave it square. */
    shape-outside: circle(50%);
    border-radius: 50%;
  }
}

I do have a few gripes with both the Firefox DevTools and the Chrome plugin though…

• I wish it was easier to add a new shape-outside to an existing element. You can do it, but you have to manually add something like shape-outside: polygon(0 0, 10px 0, 20px 0); or something to the element to kick off the tool, then start using it.
• I wish they worked with % by default instead of px units.

That second one particularly. It’s so common we size things flexibly these days that hard pixel values are sometimes useless and difficult to convert to flexible percentages.

You’re probably better off starting with Bennett Feely’s Clippy (it’s technically for clip-path, but it includes polygon() it works works for either. It works with percentages, so great, moving on from there.

“The frustrations of using CSS Shapes and CSS Exclusions”

That’s what Ben Frain recently blogged and it has some good points about all this. One key point is that using shape-outside doesn’t necessarily mean that you’re clipping the background. Personally, I find that I’m cutting a shape on backgrounds that are transparent anyway, but I take the point.

The other big one is there is no shape-inside() property (yet), so if you’re hoping to put some text inside a shape rather than have it wrap around the outside of a shape, no luck yet.

Source: CSS-tricks.com