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

shape()

shape() は CSS の関数で、clip-path および offset-path プロパティの図形を定義するために使用されます。これは、図形のパスを定義する一連のシェイプコマンドと起点を組み合わせたものです。shape() 関数は、<basic-shape> データ型のメンバーです。

シェイプクリッピング

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
css.types.basic-shape.shape
135
135
148
18.4
135
18.4
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

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
  );
}

ライブデモ

blobshape

CSS blobshape demo.

プレビュー全画面表示

diamond

CSS diamond demo.

プレビュー全画面表示

arrowshape

CSS arrowshape demo.

プレビュー全画面表示

実務での使いどころ

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

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

注意点

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

アクセシビリティ

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

参考リンク