There are some excellent resources on the CSS property shape-outside that should be studied to understand how it works and how you can use it. This new property now enjoys a lot of browser support and it’s something you can generally apply without worrying about how it looks in non-supported environments, so it’s good to use in production now.
When I started playing around with it I did stumble over a couple of things. I figured I would write down some additional tidbits and tips that aren’t covered explicitly elsewhere. First, do read up on shape-outside on MDN, from the wonderful Sara Soueidan at ListApart and Robin Rendle’s working with shapes article on css-tricks.com. Michelle Barker also has a nice article on experimental layouts using shape-outside, including advice on using inverted shape techniques.
Tips
Floated elements only
Shape-outside can only be applied on floated elements right now, so knowing how floats work is very important to be able to understand how to implement an effect using shape-outside. There are some limitations and quirks that you might bump against. And the way the shape area is implemented might surprise you.
How to get a shape to fill the height of its parent
not with position absolute
One of the first things I’ve tried to implement was a shape that expands along with the content and this proved to be pretty difficult. Shapes can be defined using relative units, but a floated element can’t be given dimensions which respond to the content around it. If you want your shape to be the length of the content it’s supposed to affect, tough luck getting it to expand and shrink in an elegant way. One way to get a floated element to stretch in either direction to match the height of the container’s contents is to use position absolute and set top/bottom/left or right, but position absolute will also destroy the intended behaviour, as the contents won’t flow around it.
probably not with height: 100% either
Setting a proportional height such as height 100% will only work if the height of the container has been set. In most cases this won’t be workable, if you’re working with an unpredictable length of content it’s unlikely you want to set an absolute height on its container element and using a relative height is not enough.
using javascript
I’ve found no way to make a floated element fit its container with css only, so the alternative is some javascript. Here’s an example I wrote that adds height attributes to elements inline. It recalculates automatically when the viewport is resized.
How the shape area relates to the bounding box of the floated element
The shape’s locus of influence sits within the dimensions of the bounding box of the floated element. The shape you define can never expand beyond the dimensions you specify on the floated element. So your shape may have dimensions that are larger than the floated element, that shape will simply clip at the edges of your floated element.
Floats, shape-outside and clipping
A floated element may escape beyond its container (demo). There are different ways to deal with that behaviour. You can force the container to expand to fit the floated element. You do that by setting overflow: hidden on the container. You can also let the float clip, while hiding it by stacking it behind subsequent elements using z-index.
The shape-area does not observe your stacking instructions!
The clipped portion of your shape, i.e. the part that exceeds the container it’s floated in can’t be stacked below other elements. And this can be a bit of a surprise. As text in subsequent elements even outside the container of your floated element may wrap around your shape-area. Here is a demo to demonstrate. For further reading it’s worth reading up on w3.org.
This green floated element is higher than its container and it breaches adjacent containers. The ellipse shape it defines continues to affect the contents of elements down the page. (The handles you see are from the Firefox dev tools control). 
The orange div here has a z-index of 2, which obscures the green floated element’s contents and background color, but you see that its own contents is still wrapping around the ellipse shape.
You can use pseudo :before and pseudo :after to created floated elements
The cool thing is that floated elements can be pseudo elements, which in turn can have shape-outside defined on them. That means you won’t have to add a physical element in your markup to insert your shape effect.
You can use a transparent png to define the shape-area
Just note that when you specify the url in your shape-outside property, it’s not actually going to display your image, it’s going to compute the area of the image and redirect words and elements around the resulting shape. To have the image display you have to do so separately.
(Check here if you have issues getting transparent pngs to work as a shape)
Firefox has a very nifty shape editor in its developer tools console
To access it, look at the rules panel while you’ve selected the floated element. For the shape-outside property you’ll see an icon which you can click on. It will highlight the shape in the browser while letting you manipulate the points.