CSSの新しい `shape()` 関数の活用法まとめ

• CSS shape() 関数が Chromium と WebKit ブラウザーでサポートされ始めた
• 従来の path() と異なり、より読みやすいCSS構文と単位で 複雑な図形を定義できるようになった
• clip-path で複雑な形状を作る際に、SVG座標の代わりに英語コマンドベースの方式で実装できる
• line、arc、curve などの 新しいコマンドで、線・曲線・アークなどを簡潔に記述できる
• shape() はまだ アニメーション対応が限定的だが、hover/focus に反応する動的変化は可能

---

概要

• CSS shape() 関数は clip-path と組み合わせて使用され、ブラウザーで 複雑な図形のクリッピングを可能にする機能
• これまでは circle、ellipse、polygon などの基本形は使えたが、自由な図形は path() でしか実現できなかった
• path() は SVG座標とコマンドをそのまま入力する必要があるため、可読性が低く学習コストも高かった

shape() 関数の特徴

• CSSらしい方法でベクター図形を構成できる
• 方向キーワード (from top left) または 座標値 (from 0 0) で始点を指定する
• 図形は 一連のコマンドで構成される。例: line、vline、arc、curve、smooth

主なコマンドの説明

• line
  • 意味: 始点から線を引く
  • 使い方: by キーワードで相対位置を指定
  • 例: line by -2px 3px
• vline
  • 意味: 垂直線を引く
  • 使い方: to で絶対位置、by で相対位置を指定
  • 例: vline to 50px
• hline
  • 意味: 水平線を引く
  • 使い方: to で絶対位置、by で相対位置を指定
  • 例: hline to 95%
• arc
  • 意味: 楕円形の曲線を描く
  • 使い方:
    • to: アークの終点
    • with: アークの傾き方向（水平方向/垂直方向）
    • of: アークが属する楕円の半径（水平方向/垂直方向）
  • 例: arc to 10% 50% of 1%
• curve
  • 意味: ベジェ曲線を描く
  • 使い方:
    • to: 曲線の終点
    • with: 曲線のコントロールポイント（曲率調整）
  • 例: curve to 0% 100% with 50% 0%
• smooth
  • 意味: 滑らかな曲線（連結されたベジェ曲線）を描く
  • 使い方:
    • to: 終点
    • by: 相対座標
    • with: コントロールポイント

その他

• shape() は hover/focus 状態で動的に変更可能
• 現在のブラウザーでは transition アニメーションは動作しない
• calc() 計算関数も使用できる

参考リンク

• 公式仕様