CSS Shapesで円状の画像に沿ってテキストを回り込ませる

Result

shape-outsideプロパティの動作サンプルです。CSS Shapesは他にも様々な形状に対応しています。

css

#circle-shape-example .curve { 
  width: 33%; height: auto;
  min-width: 150px;
  float: left;
  margin-right:2rem; 
  border-radius: 50%;
  shape-outside:circle();
}

html

<div id="circle-shape-example">
  <img src="foo.jpg" alt="bar" class="curve"><h1>KiwiFruit</h1>

  <p>This is kiwifruit: originally called “yang tao”, “melonette” or Chinese gooseberry. Cultivated in its fuzzy variety from Chinese imports, the fruit proved popular with 
  .
  .
  .
</p>
</div>

can i use

via

Wrapping Text Around A Circular Image With CSS Shapes