Widely available YES。全主要ブラウザで対応済み。雑誌風レイアウトや装飾的なテキスト回り込みに有効。

shape-outside

shape-outside は CSS のプロパティで、隣接するインラインコンテンツが折り返すシェイプ (形状) を定義します（矩形でない場合もあります）。デフォルトでは、インラインコンテンツはマージンボックスを回り込みます。shape-outside によって、この回り込みをカスタマイズし、テキストが単純なボックスではなく複雑なオブジェクトの周りを回り込めるようにします。

レイアウトテキスト回り込み

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
shape-outside
37
79
62
10.1
37
10.3
その他
css.properties.shape-image-threshold

shape-image-threshold は CSS のプロパティで、 shape-outside の値に指定された画像によってシェイプを抽出するために使用するアルファチャネルのしきい値を設定します。
37
79
62
10.1
37
10.3
CSS プロパティ
percentages

不透明度のパーセント値のサポート
78
79
70
78
その他
css.properties.shape-margin

shape-margin は CSS のプロパティで、shape-outside を使用して作成された CSS シェイプのマージンを設定します。
37
79
62
10.1
37
10.3
CSS プロパティ
circle

は CSS のデータ型で、clip-path、shape-outside、offset-path の各プロパティで使用されるシェイプを表します。
37
79
62
10.1
37
10.3
gradient

は CSS のデータ型で、2 色以上の連続的な色の変化で構成される特殊な型の image です。
37
79
62
10.1
37
10.3
image

は CSS の データ型で、2 次元の画像を表現します。
37
79
62
10.1
37
10.3
inset

は CSS のデータ型で、clip-path、shape-outside、offset-path の各プロパティで使用されるシェイプを表します。
37
79
62
10.1
37
10.3
none
37
79
62
10.1
37
10.3
path

path() は CSS の関数で、SVG パス文字列を受け取り、 CSS シェイプや CSS モーションパスで描かれるを図形を有効にするために使用します。path() 関数は、basic-shape データ型の値です。これは、CSS の offset-path および clip-path プロパティ、それに SVG の d 属性で使用できます。
polygon

は CSS のデータ型で、clip-path、shape-outside、offset-path の各プロパティで使用されるシェイプを表します。
37
79
62
10.1
37
10.3
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (10.1)

基本構文

CSS 
/* Circular wrapping */
.circle-image {
  float: left;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  shape-outside: circle(50%);
  margin-right: 1rem;
}

/* Polygonal wrapping */
.angled {
  float: right;
  width: 300px;
  height: 400px;
  shape-outside: polygon(0 0, 100% 0, 100% 100%, 30% 100%);
}

ライブデモ

Circle() Times clip

shape-outside Circle() times clip demo.

プレビュー全画面表示

Ellipse() Times clip

shape-outside Ellipse() times clip demo.

プレビュー全画面表示

Polygon() Times clip

shape-outside Polygon() times clip demo.

プレビュー全画面表示

実務での使いどころ

  • 雑誌風テキストレイアウト

    円形の画像にテキストを沿わせて流し、紙媒体のような洗練されたレイアウトを実現する。

  • 画像の形状に沿ったテキスト回り込み

    透過 PNG の形状に合わせてテキストが回り込み、画像とテキストが自然に融合するデザイン。

注意点

  • shape-outside は float が設定された要素でのみ機能する。Flexbox や Grid 内では直接使用できない。
  • 複雑な polygon() の座標指定は手作業では困難。ツールを使って座標を生成するのが実用的。

アクセシビリティ

  • テキストの回り込みは視覚的な演出であり、スクリーンリーダーでは通常のテキスト順で読み上げられる。読み上げ順に問題がないか確認する。

参考リンク