CSS shape()完全ガイド — SVGなしで複雑な図形を描く2026年の新手法

shape()関数の登場 — CSSだけで図形を描く時代へ

Webで複雑な図形を表現するには、これまでSVGの <path> 要素やCSS clip-path: path() が主な選択肢でした。しかし、SVGパスの構文（M 0 0 L 100 50 ...）は人間が読み書きするには難解で、レスポンシブ対応も困難という課題がありました。

2026年、CSS Shapes Module Level 2で定義された shape()関数 が主要ブラウザで利用可能に。% や rem、calc() が使えるレスポンシブ対応の図形描画が、CSSだけで実現できるようになりました。

ブラウザ対応状況

2026年2月にBaseline 2026に到達し、主要ブラウザすべてで利用可能です。

Interop 2026の重点項目にも含まれており、クロスブラウザの安定実装が進んでいます。

基本構文

shape( [<fill-rule>]? from <起点>, <コマンド>[, ...] )

clip-path または offset-path プロパティで使用します。

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

シェイプコマンド一覧

to（絶対座標） と by（相対座標） を切り替えられるのが便利なポイント。相対座標を使えば、基準点からの差分で図形を定義できます。

path()との決定的な違い

最大の違いはレスポンシブ対応です。path() はピクセル値しか使えないため、画面サイズに応じた図形の変形ができませんでした。shape() では % や vw が使えるので、コンテナに追従する柔軟な図形が描けます。

実装例

波形クリッピング

.wave-section {
  clip-path: shape(
    from 0% 20%,
    curve to 100% 20% with 25% 0% / 75% 40%,
    vline to 100%,
    hline to 0%,
    close
  );
}

ヘッダーやセクションの境界を波形にするパターン。curve コマンドの制御点を調整するだけで波の形状を変更できます。

ハート型

.heart {
  clip-path: shape(
    from 50% 30%,
    arc to 25% 25% of 25% cw,
    arc to 50% 60% of 40% cw,
    arc to 75% 25% of 40% cw,
    arc to 50% 30% of 25% cw,
    close
  );
  background: #e74c3c;
  width: 200px;
  aspect-ratio: 1;
}

arc コマンドで円弧を組み合わせてハート型を構成。% で定義しているため、width を変えるだけでサイズが追従します。

吹き出し

.speech-bubble {
  clip-path: shape(
    from 0% 0%,
    hline to 100%,
    vline to 70%,
    line to 20% 70%,
    line to 10% 100%,
    line to 15% 70%,
    hline to 0%,
    close
  );
  background: #f0f0f0;
  padding: 1.5rem;
  padding-bottom: 3rem;
}

line コマンドで三角形の「しっぽ」部分を描画。チャットUIやツールチップに応用できます。

フォールバック戦略

未対応ブラウザ向けのフォールバックは @supports で検出できます。

/* 対応ブラウザ向け */
@supports (clip-path: shape(from 0 0, move to 0 0)) {
  .element {
    clip-path: shape(from 0% 0%, /* ... */);
  }
}

/* 未対応ブラウザ向け */
@supports not (clip-path: shape(from 0 0, move to 0 0)) {
  .element {
    border-radius: 50%;
  }
}

2026年4月現在、Baseline 2026に到達しているため、最新バージョンのブラウザであれば問題なく利用できます。ただし、古いバージョンのサポートが必要な場合はフォールバックを用意しましょう。

アニメーションとの組み合わせ

CSSカスタムプロパティと組み合わせることで、図形のアニメーションも実現できます。

@property --wave-height {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 20%;
}

.animated-wave {
  clip-path: shape(
    from 0% var(--wave-height),
    curve to 100% var(--wave-height) with 25% 0% / 75% 40%,
    vline to 100%,
    hline to 0%,
    close
  );
  transition: --wave-height 0.5s ease;
}

.animated-wave:hover {
  --wave-height: 10%;
}

まとめ

CSS shape() は、Web上の図形表現における大きなパラダイムシフトです。

• SVGの知識が不要: CSSの標準的な構文で複雑な図形を定義
• レスポンシブ対応: %・rem・calc() が使えるため、画面サイズに追従
• Baseline 2026到達: 主要ブラウザすべてで利用可能
• アニメーション対応: CSSカスタムプロパティとの組み合わせで動的な図形も実現

デザインカンプにある「ちょっと凝った図形」を実装するとき、もうSVGエディタを開く必要はないかもしれません。まずは clip-path: shape(...) で簡単な図形から試してみてください。

Web標準の進化に関連して、Webアクセシビリティ対応ガイドも合わせて確認しておくと、アクセシブルなデザインと装飾の両立に役立ちます。