CSS　shape-outsideプロパティを使ってみよう

画像に対してfloatをかけて、テキストを流し込みをする場合、通常の写真なら特に問題はないのですが、画像の形を丸くした場合テキストもその円形に沿わせたくなります。
下図参照

このようにするには「shape-outsideプロパティ」を使います。

まず、画像を円形にするにはCSSのプロパティで「border-radius: 50%」とすれば簡単に出来上がります。
画像が円形になってもテキストは矩形の形に並びます。

そこで画像に対して「shape-outside: circle(50%)」を設定します。
これで、テキストは上の図のように並んでくれます。
なお、テキストと画像の間隔はマージンで設定できます。

circle()などのシェープ関数の使い方はCSSでクリッピングマスクを使う方法を参考にしてください。

サンプル

.pull-left{
  float:left;
  border-radius: 50%;
  shape-outside: circle(50%);
  margin-right:50px;
}