《CSS》画像をSVGの形に合わせて切り抜く

公開日：2025年06月23日　最終更新日：2025年6月23日

CSS

mask-imageプロパティを使って、画像を指定したSVGの形に合わせて切り抜く方法を紹介します。

DEMO

HTML

<div class="mask">
	<img src="https://blog.grinee.net/demo/images/scenery.jpg" alt="" class="mask-image">
</div>

CSS

widthとheightの値は、SVGの大きさに合わせて調整します。

.mask-image {
	display: block;
	height: 200px;
	mask-image: url('https://blog.grinee.net/demo/images/mask.svg');
	mask-position: center;
	mask-repeat: no-repeat;
	mask-size: cover;
	object-fit: cover;
	width: 162px;
}

Ad