Newly available 条件付きOK。主要ブラウザで対応済みだが、古いバージョンでは未対応の場合がある。フォールバックを検討。
エフェクト Newly available

shape()

shape()関数は、複数の描画コマンド（line、move、curve、arc、smooth、closeなど）を組み合わせて任意の図形を定義するCSS関数です。path()関数がSVGパス構文を使用するのに対し、shape()はよりCSS的な構文で図形を記述できます。相対単位やCSS計算式が使用でき、レスポンシブな図形の作成が可能です。

シェイプクリッピング

概要

shape()関数は、複数の描画コマンド（line、move、curve、arc、smooth、closeなど）を組み合わせて任意の図形を定義するCSS関数です。path()関数がSVGパス構文を使用するのに対し、shape()はよりCSS的な構文で図形を記述できます。相対単位やCSS計算式が使用でき、レスポンシブな図形の作成が可能です。

対応ブラウザ

デスクトップ

Chrome 135+
Edge 135+
Safari 18.4+
Firefox 148+

モバイル

Chrome Android 135+
Safari iOS 18.4+
Firefox Android 148+

基本構文

CSS 
.blob {
  clip-path: shape(
    from 50% 0%,
    curve to 100% 50% with 100% 0%,
    curve to 50% 100% with 100% 100%,
    curve to 0% 50% with 0% 100%,
    close
  );
}

実務での使いどころ

  • レスポンシブな複雑図形の作成

    CSS単位と計算式を使用して、画面サイズに応じて変化するクリッピング図形を定義します。

注意点

  • shape()はpath()と異なりCSS単位や計算式をサポートしますが、ブラウザサポートは比較的新しいです。

アクセシビリティ

  • shape()によるクリッピングは視覚的な表現のみに影響し、DOMのコンテンツやアクセシビリティツリーには影響しません。

参考リンク