CSS シェイプ

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

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

• CSS シェイプの概要
• ボックス値からのシェイプ
• 基本シェイプ
• 画像からのシェイプ
• CSS でのシェイプのパスの編集 — Firefox 開発ツール

• A list of CSS Shapes resources
• CSS Shapes 101
• Creating non-rectangular layouts with CSS Shapes
• How To Use CSS Shapes In Your Web Design
• How To Get Started With CSS Shapes
• What I Learned In One Weekend With CSS Shapes
• CSS vs. SVG: Shapes and Arbitrarily-Shaped UI Components