CSS Shapes and text flow

http://www.html5rocks.com/en/tutorials/shapes/getting-started/

by mark47

HTML

<div class="element"></div>
<p>The shape-image-threshold property defines the minimum opacity level of pixels that will be used to create the shape.  Its value must be in the range between 0.0 (fully transparent) and 1.0 (fully opaque). So, shape-image-threshold: 0.5 means that only pixels with opacity 50% and above will be used to create the shape.</p>

<p>The shape-image-threshold property defines the minimum opacity level of pixels that will be used to create the shape. Its value must be in the range between 0.0 (fully transparent) and 1.0 (fully opaque). So, shape-image-threshold: 0.5 means that only pixels with opacity 50% and above will be used to create the shape.</p>

<p>The shape-image-threshold property defines the minimum opacity level of pixels that will be used to create the shape. Its value must be in the range between 0.0 (fully transparent) and 1.0 (fully opaque). So, shape-image-threshold: 0.5 means that only pixels with opacity 50% and above will be used to create the shape.</p>
<p>The shape-image-threshold property defines the minimum opacity level of pixels that will be used to create the shape. Its value must be in the range between 0.0 (fully transparent) and 1.0 (fully opaque). So, shape-image-threshold: 0.5 means that only pixels with opacity 50% and above will be used to create the shape.</p>

CSS

.element{
    shape-outside: circle(30%);
  transition: shape-outside 1s;
  width: 200px;
  height: 200px;
  float: left;
}
.element:hover {
    shape-outside: circle(50%);
}