CSS clip-path ジェネレーター

5つの形状関数

一般的な多角形クリップ

/* Hexagon */
clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);

/* Rhombus */
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);

/* Chevron / arrow pointing right */
clip-path: polygon(0 0, 75% 0, 100% 50%, 75% 100%, 0 100%, 25% 50%);

/* Parallelogram */
clip-path: polygon(20% 0, 100% 0, 80% 100%, 0 100%);

/* Diagonal slice (modern hero section) */
clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);

ヒーローセクションの対角線はおそらく最も広く使用されているものであり、SVGを一切使用せずに現代的な傾斜効果のあるセクションを実現します。

clip-path をアニメーションさせる

clip-path は、両方の状態が同じ形状関数で、同じ数の頂点を持つ限りアニメーションします。4頂点の多角形は別の4頂点の多角形へスムーズに変化しますが、頂点を追加または削除すると補間が崩れます。

.card { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
.card:hover { clip-path: polygon(0 5%, 100% 0, 100% 95%, 0 100%); }

これは、出現エフェクト、ホバー時の微妙な変形、ページ遷移などに使えます。

clip-path と overflow: hidden の違い

overflow: hidden はボーダーボックスの長方形でクリップします（border-radius で丸めることも可能）。clip-path は定義した任意の形状でクリップし、影や輪郭を含むすべてをクリップします。影を形状の外側にも表示したい場合、clip-path は適していません。

filter: drop-shadow() を使えば clip-path 要素に形状に沿った影を付け直せますが、処理は遅くなります。

パフォーマンス

clip-path は最新のブラウザで GPU により高速化されるため、アニメーションも滑らかです。例外は path() と非常に複雑な多角形（頂点40個以上）で、一部のブラウザでは CPU レンダリングに切り替わります。

アクセシビリティ

clip-path は表示される部分だけを変更します。スクリーンリーダー、キーボードフォーカス、ポインターイベントは、切り抜かれた形状ではなく要素全体のボックスに従います。画像が星形に切り抜かれていても、alt テキストは通常どおり読み上げられます。ボタンがシェブロン形に切り抜かれていても、クリック判定は見えているシェブロンではなく長方形全体になります。そのため、一見何もない領域を誤ってクリックしてしまうことがあります。

変わった切り抜き形状のボタンでは、要素の幅と高さをぴったり詰めて設定し、当たり判定が表示領域とできるだけ一致するようにしてください。