clip-path生成

仕組み

clip-pathは、要素を輪郭の形に切り抜きます。図形の外側は描画されず、クリックもできません。そのため、図形の絵ではなく本物の図形になり、画像や動画を含む、あらゆる要素に使えます。

ピクセルではなくパーセント

ポリゴンの点は、要素自身の幅と高さに対するパーセントで指定されるため、図形はサイズが変わっても崩れず、要素とともに伸縮します。これが、レスポンシブなレイアウトで使える理由です。

クリックも図形に従います

この点が、clip-pathと装飾的なオーバーレイとの違いです。切り取られた領域はポインターイベントをまったく受け取らないため、三角形のボタンは、見た目だけでなくマウスにとっても三角形になります。

図形どうしのアニメーション

ポリゴンが別のポリゴンへ滑らかに遷移できるのは、両方が同じ数の点を持つ場合だけです。よく使われる手法は、単純なほうの図形に重複する点を足して数を合わせることです。同じ位置に2つの点を置いて4点で書いた三角形は、四角形へと変形できます。

-webkit-の行

現行のブラウザに必要なのは、プレフィックスなしのプロパティだけです。プレフィックス付きのコピーが含まれているのは、一部の古いSafariがいまだに必要としていて、残しておいても支障がないからです。

行わないこと

切り抜くだけで、再配置は行いません。周囲のテキストは、その要素を元の四角形のものとして扱い続けます。テキストを図形に沿って回り込ませるには、同じ構文を使うshape-outsideが必要です。