Available in Chrome 37+
Thanks to the shape-outside css property set on
the element on the left, this paragraph is flowing around the polygon
shape defined in that property's value.
There are four basic shapes supported: polygon(), circle(), ellipse()
and inset(). This circle is defined using the radius (80px)
and the center position (at 50% 50%).
inset() is used to create rectangular shapes
inside an element. It is useful for defining some rounded
corners for the float area.
You can use alpha channel of an image to float text around it.
Pass the image's url to the shape-outside property.
The shape is defined by the pixels whose alpha value is greater than
the threshold specified in the shape-image-threshold.
shape-margin creates a space between the shape defined in
shape-outside and the flowing text around it.
content
CSS shapes use reference box to define the exact layout of
the float area. Apart from the default width and height of the element,
margin-box, content-box,
padding-box, and border-box can be used.
This shape uses margin-box, defined in the
shape-outside property.
content
This shape uses border-box, defined in the
shape-outside property. The content is in red,
border in yellow and margin area in light blue.
content
This shape uses padding-box, defined in the
shape-outside property. The content is in red,
border in yellow and margin area in light blue.
content
This shape uses content-box, defined in the
shape-outside property. The content is in red,
border in yellow and margin area in light blue.