CSS Shape関数を使ったクリエイティブな表現

ヒーロー画像をクリップする装飾的な矢印を作りたいとします。clip-path: path()を使ってSVG座標を記述すれば動作しますが、コンテナのサイズが変わると問題が発生します。矢印は元のピクセル寸法のまま固定され、他の要素はスケールします。これがCSSのshape()関数が解決する核心的な制限です。

CSS shape()関数が実際に行うこと

shape()関数は、パーセンテージ、calc()、コンテナクエリ単位など、使い慣れたCSS単位を使用して複雑な図形を定義するCSS標準の方法です。SVG構文を借用してすべての値をピクセルとして解釈するpath()とは異なり、shape()は包含要素に適応するレスポンシブなCSS図形を構築できます。

重要な違いは次のとおりです。path()の場合:

clip-path: path("M0 0 L 100 0 L 150 50 L 100 100 L 0 100 z");

これらの数値は固定ピクセルです。要素のサイズを変更しても、図形のサイズは変わりません。

shape()の場合:

clip-path: shape(from 0% 0%, 
  line to calc(100% - 50px) 0%, 
  line to 100% 50%, 
  line to calc(100% - 50px) 100%, 
  line to 0% 100%, 
  close);

これで図形は要素とともにスケールします。パーセンテージは要素の寸法に対して解決されます。固定値と相対値を混在させることで、コンテナのサイズが変わっても比率を維持したり、特定の角度を保持したりする図形を作成できます。

shape()が機能する場所:clip-pathとoffset-path

CSS shape()関数は現在、異なる目的を持つ2つのプロパティに適用されます。

CSS clip-path shape() は、要素のどの部分を表示するかを定義します。図形の外側はすべてクリップされます。これは純粋に視覚的なもので、要素のボックスモデルは矩形のままであり、レイアウト計算はクリッピングを完全に無視します。

CSS offset-path shape() は、アニメーションのモーションパスを定義します。offset-distanceと組み合わせることで、カスタムの曲線や直線に沿って要素を移動できます。図形は軌跡を記述するものであり、可視性ではありません。

これらは、フロート要素の周りのテキストフローに影響を与えるshape-outsideとは根本的に異なります。そのプロパティはCSS Shapes Level 1に属し、現在shape()関数をサポートしていません。circle()、ellipse()、polygon()などの基本図形のみをサポートしています。

ブラウザサポート:2025年後半の現実

shape()関数はSafari 18.4で実装され、Chromiumベースのブラウザにも搭載されています。Firefoxはまだサポートしていません。つまり、ベースラインCSSとして扱うことはできません。

機能検出は簡単です:

@supports (clip-path: shape(from 0% 0%, line to 100% 0%)) {
  /* shape()がサポートされている */
}

本番環境での使用には、プログレッシブエンハンスメントが不可欠です。まず曲線なしで図形を近似するpolygon()フォールバックから始め、サポートするブラウザ向けにshape()バージョンを重ねます:

.element {
  clip-path: polygon(0 0, 80% 0, 100% 50%, 80% 100%, 0 100%);
  clip-path: shape(from 0% 0%, 
    line to 80% 0%, 
    line to 100% 50%, 
    line to 80% 100%, 
    line to 0% 100%, 
    close);
}

2番目の宣言は、それを理解するブラウザでのみ最初の宣言を上書きします。

探求する価値のあるクリエイティブなユースケース

装飾的なクリッピングは、図形がレイアウトに応答するときにより実用的になります。斜めのセクション区切りは、ビューポート幅に関係なく角度を維持できます。カードの切り欠きコーナーは、グリッド内でカードサイズが変わっても比例を保つことができます。

レスポンシブマスクは、単位を混在させることで画像に利点をもたらします。全体的な図形が画像コンテナとともにスケールする一方で、曲線の切り抜きを固定半径に保つことができます。

モーションパスは、ウェイポイントをパーセンテージで表現できるときに柔軟性が向上します。要素は、コンテナの実際の寸法に関係なく、コンテナの中心を周回できます。

真の力は、shape()をCSSカスタムプロパティやコンテナクエリ単位と組み合わせたときに現れます。単一の図形定義が、JavaScriptの再計算なしで複数のコンテキストに適応できます。

まとめ

CSS shape()関数は特定の問題を解決します:複雑なクリッピングパスとモーションパスをCSSから離れることなくレスポンシブにすることです。ネイティブ構文を使用し、calc()をサポートし、パーセンテージベースの座標で動作します。

ピクセル精度が重要な固定寸法の図形に対してpath()を置き換えるものではありません。テキストの回り込みのためのshape-outsideでは動作しません。そして、Firefoxのサポートが到着するまでフォールバックが必要です。

スケールする必要があるクリエイティブな視覚効果には、shape()が欠けていたツールです。明確なフォールバック戦略とともに使用すれば、装飾的なクリッピングは最終的にレスポンシブレイアウトの他の部分と同じように動作します。

よくある質問

Truly understand users experience

See every user interaction, feel every frustration and track all hesitations with OpenReplay — the open-source digital experience platform. It can be self-hosted in minutes, giving you complete control over your customer data. . Check our GitHub repo and join the thousands of developers in our community..