CSS シェイプ
CSS シェイプは、 CSS で使用する幾何学的な図形を記述します。レベル 1 の仕様書では、 CSS シェイプは浮動状態の要素に適用されます。仕様書では浮動状態の要素においてシェイプを定義する様々な方法を定義しており、コンテンツの折り返し線が要素ボックスの矩形に従うのではなく、図形に回り込むようになります。
基本的な例
以下の例では、左に浮動状態の画像を表示し、shape-outside プロパティを circle(50%) の値で適用しています。これは円形を作成し、浮動状態の要素で折り返すコンテンツが図形に回り込むようになります。これにより、テキストの行ボックスが折り返す長さが変わります。
リファレンス
プロパティ
データ型
ガイド
外部リソース
仕様書
| 仕様書 | 状態 | 備考 |
|---|---|---|
| CSS Shapes Module Level 1 | 勧告候補 | 初回定義 |