CSS shape()関数ジェネレーターとは
CSS shape()関数（Baseline 2026、Chrome 139+）は、clip-pathおよびshape-outsideプロパティ用の非矩形シェイプを作成します。従来のpolygon()、circle()などのレガシーシェイププリミティブとは異なり、shape()は要素自身の寸法に対するパーセンテージ座標、margin-boxやpadding-boxなどの参照ボックス、および異なるシェイプタイプ間のスムーズなアニメーション遷移をサポートします。polygon、circle、ellipse、path、rectの5つのジオメトリタイプのshape() CSSを生成します。
クイックアンサー
CSS shape()は、要素サイズに対するパーセンテージ座標、参照ボックスサポート、polygon、circle、ellipse、path、rectタイプ間のアニメーション可能な遷移を備えたclip-pathおよびshape-outside用の非矩形シェイプを作成します。Chrome 139+、Safari 18.2+（Baseline 2026）。サポートされていないブラウザ向けに常にフォールバックシェイプ関数を含めてください。
Last updated: 2026-06-02
制限事項
- ブラウザサポートは2026年半ば現在、Chrome 139+、Edge 139+、Safari 18.2+に限定されています。Firefoxはまだshape()をサポートしておらず、古いブラウザは宣言全体を無視します。広い互換性にはフォールバックシェイプ関数が必要です。
- shape() polygonは、ベア数値を受け入れる従来のpolygon()関数とは異なり、各座標値に明示的な単位（pxまたは%）が必要です。これにより、既存のpolygon()宣言から移行する際に構文がより冗長でエラーが発生しやすくなります。
- すべてのシェイプタイプが相互にクリーンに補間されるわけではありません。shape()はクロスタイプのアニメーションをサポートしていますが、大きく異なるジオメトリ間の遷移（たとえば、rectから複雑なパス）は予期しない中間シェイプを生成する可能性があります。デプロイする前にアニメーションを視覚的にテストしてください。
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
使い方
- シェイプタイプを選択します。polygon（座標ペアのリスト）、circle（中心と半径）、ellipse（中心とx半径およびy半径）、path（SVGパスデータ）、またはrect（上、右、下、左とオプションの丸み）。
- 参照ボックスを選択します。margin-box、padding-box、content-box、またはborder-box。参照ボックスはパーセンテージベースの座標の座標系を決定します。
- シェイプ座標を設定します。ポリゴンの場合は座標点ペアを追加します。円と楕円の場合は中心位置と半径値を設定します。アニメーションフレンドリーモードを有効にして、シェイプ値がCSS遷移に互換性のある構文を使用することを確認します。
- 生成されたshape() CSSをコピーし、clip-pathまたはshape-outsideプロパティに適用します。shape()をまだサポートしていないブラウザ向けに、従来のシェイプ関数を使用したフォールバックを追加します。
主な用途
- clip-pathとshape()ポリゴンおよびパーセンテージ座標を使用して、ヒーローセクションや注目コンテンツカード用の非矩形画像マスクを作成します。
- shape-outsideとshape() circleおよびpadding-box参照を使用して、円形または楕円形の画像の周りにテキストを回り込ませ、一貫したスペーシングを実現します。
- CSS遷移を使用して、ホバー時またはスクロール時にポリゴンと円のシェイプ間でアニメーションします。shape()は異なるシェイプタイプ間の補間をサポートしています。