path()
path()関数は、SVGのd属性と同じパスコマンド構文を使用して、任意の複雑な図形を定義できるCSS関数です。clip-path、shape-outside、およびSVGのd属性で使用できます。circle()やpolygon()では表現できない曲線や複雑な形状のクリッピングパスを作成する際に不可欠です。
概要
path()関数は、SVGのd属性と同じパスコマンド構文を使用して、任意の複雑な図形を定義できるCSS関数です。clip-path、shape-outside、およびSVGのd属性で使用できます。circle()やpolygon()では表現できない曲線や複雑な形状のクリッピングパスを作成する際に不可欠です。
対応ブラウザ
デスクトップ
Chrome 未対応
Edge 未対応
Safari 未対応
Firefox 未対応
基本構文
CSS
.star {
clip-path: path('M50,0 L61,35 L98,35 L68,57 L79,91 L50,70 L21,91 L32,57 L2,35 L39,35 Z');
}実務での使いどころ
-
複雑な図形のクリッピング
星形やハート型など、基本図形関数では表現できない複雑な形状で要素をクリッピングします。
注意点
- ブラウザサポートが限定的なため、プログレッシブエンハンスメントとして使用し、フォールバックを用意してください。
アクセシビリティ
- クリッピングで隠されたコンテンツもDOMには存在するため、不要なテキストがスクリーンリーダーで読み上げられないよう注意してください。