CSS「mask-image」を使用して画像を好きな形でマスキング（切り欠き）する

画像を使用する際に、曲線等の特殊な形で実装したい時があります。
マスク済みの画像を用意する方法もありますが、動的に呼び出すコンテンツ等の場合は都度作成が難しい場合もあるため、CSSでマスキングする方法をメモ。

マスク用の画像を用意する

マスクしたい形の画像（マスク用画像）をPNG形式やSVG形式で用意します。
この時、画像を残したい（有効にしたい）方に色を付け、削る方を透明にします。

コードの実装

HTML

<figure>
<img src="画像のurl" class="image__mask">
</figure>

CSS

.image__mask {
	-webkit-mask-image: url(マスク用画像のURL);
	mask-image: url(マスク用画像のURL);
	mask-size: 100% auto;
	mask-position: bottom;
	mask-repeat: no-repeat;
}

サンプル

• CSS マスキング mask-image の使い方