CSS「clip-path」を使って画像を多角形にマスキング（切り抜く）

ホームページに画像を配置する際に、四角形や円形、角丸を用いることが多いのだけれど、変化をつけて別の形（多角形）に切り欠きたい場合に、画像を作り直すのは大変。そんな時に便利な方法があったのでメモ。

HTML

<figure class="clip__image">
	<img src="○○.jpg">
</figure>

CSS

.clip__image {
	width: 20vw;
	height: 20vw;
}
.clip__image img {
	clip-path: polygon(0 20%, 20% 0, 100% 0, 100% 80%, 80% 100%, 0 100%);
}

「polygon」の部分が多角形を意味し、座標（左上を基準に、右下に向けて100%になるよう、X軸、Y軸の順）を打ち込むことで親要素（自身に幅、高さを設定した場合はその値）の範囲内で変化する。

値はパーセンテージ（％）の他にピクセル（px）やビューポート（vw、vh）にも対応。レスポンシブの時も比率を変えることなく表現が可能。

サンプル

サンプルは「filter」を使ってドロップシャドウも適応させてますが、切り欠きした形に対応して影をつけることも可能。

CSS

.clip__image {
	filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.1));
}

• CSS clip-path の使い方