ellipseで楕円形を指定した例

図形を避けてテキストが回り込むのはhtml初期からありましたけど、基本的に縦に直線的な形でよけるだけです。円形など直線以外の形にそって文字を制御するのに昔はJSなどでやってました。 shape-outsideというので文字の左側の並びを制御しながら、溢れた文字は次のカラムへ送るというcolumn-countでDTPみたいなことは出来ないかと考えました。
しかし、併用はできないんですかね。同時に設定するとcolumn-countの方が優先されるようです。
shape-outsideはellipse(50% 60% at 10% 70%)

border-boxで図形のシェイプに沿って

画像にcircle(50%)というように指定しても同じような結果が得られますが、これはborder-radiusで円形にした図形に沿って文字を制御した例です。

複雑な図形もpolygonという多角形の座標指定でテキストが回り込むのを作れます。円形や直線の形にそって文字を制御するのはstyleを書いていても数値で判断しやすいのですが、多角形になると描きにくいです。そこで、ブラウザをFirefoxにして開発ツールを表示させて、shape部分を選ぶとブラウザ上で形の修正ができるので便利です。

斜めにテキストを並べる

シェイプのグラデーションを使って、斜めのラインに沿ってテキストを並べることができます。img自体にスタイルをつけても良いのですが、ここではコントロールしやすいようにdiv矩形の背景として画像を配置しています。テキストがどの部分まで続いているのかわかりやすいようにpタグに背景色をつけています。角度は115°にしています。