CSS シェイプ

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

• shape-image-threshold
• shape-margin
• shape-outside

• <basic-shape>

• 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