path()
path() は CSS の関数で、SVG パス文字列を受け取り、 CSS シェイプや CSS モーションパスで描かれるを図形を有効にするために使用します。path() 関数は、<basic-shape> データ型の値です。これは、CSS の offset-path および clip-path プロパティ、それに SVG の d 属性で使用できます。
path() 関数を使用する際にはいくつかの制限があります。パスは単一の文字列として定義する必要があるため、変数（var() 関数）を使用して独自のパスを作成することはできません。同時に、パス内のすべての長さは暗黙的にピクセル (px) 単位で定義され、それ以外の単位は使用できません。shape() 関数は path() 関数よりも柔軟性があります。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 52 | 79 | 72 | 13.1 | 52 | 13 | |
| CSS タイプ | ||||||
| clip-path は CSS のプロパティで、要素のどの部分を表示するかを設定するクリッピング領域を作ります。具体的には、領域の内部の部分は表示され、外側の部分は非表示になります。 | 88 | 88 | 72 | 13.1 | 88 | 13 |
| d 属性は描かれるパスを定義します。 | 52 | 79 | 97 | | 52 | |
| offset-path は CSS のプロパティで、要素がたどる経路（パス）を指定し、そのパス内の親コンテナーまたは SVG 座標系における要素の位置を決定します。パスは、要素が位置指定または移動される直線、曲線、または幾何学的形状です。 | 56 | 79 | 72 | 16 | 56 | 16 |
| shape-outside は CSS のプロパティで、隣接するインラインコンテンツが折り返すシェイプ (形状) を定義します（矩形でない場合もあります）。デフォルトでは、インラインコンテンツはマージンボックスを回り込みます。shape-outside によって、この回り込みをカスタマイズし、テキストが単純なボックスではなく複雑なオブジェクトの周りを回り込めるようにします。 | | | | | | |
- ベンダープレフィックス付きで対応: -webkit- (10.1)
- ベンダープレフィックス付きで対応: -webkit- (10.3)
- ベンダープレフィックス付きで対応: -webkit- (10.1)
- ベンダープレフィックス付きで対応: -webkit- (10.3)
基本構文
.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には存在するため、不要なテキストがスクリーンリーダーで読み上げられないよう注意してください。