CSSで要素を形状に切り抜く

六角形アバター、斜めの区切り、ひし形写真。clip-pathなら画像編集なしで実現します。形を作ってCSSをコピー。

このガイドで使う道具

clip-pathは要素の描画領域を円・楕円・矩形・任意の多角形に切り抜きます。マスク画像は不要です。ビルダーは調整しながらライブの見本に適用します。

プリセットは三角形・矢印・星をカバーし、circle/ellipseは半径、insetは角丸付き矩形、polygonは「x y」の%頂点を3〜24点取ります。

右向きのバナーは頂点 0 0 / 85 0 / 100 50 / 85 100 / 0 100 の5点でシェブロン形になります。inset(0 20% round 8px)なら左右を20%ずつ削った角丸の紡錘形です。

要素基準の%で、要素をリサイズすると形も追従します。切り抜かれた領域もレイアウト上は占有します（ボックスは縮みません）。path()・shape()・アニメーションのキーフレームは対象外です。