CSS シェイプ

CSS シェイプは、 CSS で使用する幾何学的な図形を記述します。 レベル1の仕様書では、 CSS シェイプは浮動状態の要素に適用されます。仕様書では浮動状態の要素においてシェイプを定義する様々な方法を定義しており、コンテンツの折り返し線が要素ボックスの矩形に従うのではなく、図形に回り込むようになります。

基本的な例

以下の例では、左に浮動状態の画像を表示し、 shape-outside プロパティを circle(50%) の値で適用しています。これは円形を作成し、浮動状態の要素で折り返すコンテンツが図形に回り込むようになります。これにより、テキストの行ボックスが折り返す長さが変わります。

リファレンス

プロパティ

データ型

ガイド

外部リソース

仕様書

仕様書 状態 備考
CSS Shapes Module Level 1 勧告候補 初回定義。

ブラウザーの対応

shape-outside

BCD tables only load in the browser

shape-margin

BCD tables only load in the browser

shape-image-threshold

BCD tables only load in the browser