小金井にあるWEB制作会社の備忘録

MEMORANDUM

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));
}