三角形・星・多角形などの形を選んで、clip-pathのCSSを生成します。画像や要素を好きな形に切り抜けます。
書き方
polygonの座標は「左からの割合 上からの割合」の組を、頂点の順に並べます。0% 0%が左上、100% 100%が右下です。
clip-path: polygon(50% 0%, 100% 100%, 0% 100%); /* 三角形 */ clip-path: circle(50% at 50% 50%); /* 円 */ clip-path: ellipse(40% 30% at 50% 50%); /* 楕円 */ clip-path: inset(10% 20% 30% 40% round 8px); /* 内側を切り抜き */
使いどころ
- セクションの境界を斜めにカットする
- 画像を六角形や円に切り抜く
- ふきだしの三角部分を作る
- ホバー時に形を変えるアニメーション（頂点数が同じなら滑らかに変化します）
注意点
clip-pathで切り抜いた外側は、表示されないだけでなくクリックも受け付けません。ボタンに適用する場合は、当たり判定が意図どおりか確認してください。
また、切り抜いた領域の外にはみ出す影（box-shadow）も一緒に消えます。影を付けたい場合は、親要素にfilter: drop-shadow()を使う方法があります。
よくある質問
Q 座標はどう指定しますか？
「横位置 縦位置」の組を頂点の順に並べます。%指定なら要素サイズに対する割合になります。
Q 切り抜いた部分はクリックできますか？
できません。表示されない領域はポインタイベントも受け付けません。
Q 影を付けるには？
box-shadowは切り取られます。親要素に filter: drop-shadow() を指定すると、形に沿った影を付けられます。
Q アニメーションできますか？
頂点の数が同じpolygonどうしであれば、transitionで滑らかに変化させられます。