CSS 画像を三角形にマスク抜きする方法

公開日 2023.04.21

by Takumi Hirashima

CSS で画像を三角形に切り抜き（マスク）する方法を紹介します。
例えば、デザインのアクセントで画像をマスクしたいときに便利な方法です。

CSSで画像を三角形に切り抜く場合は clip-path

CSSで画像を三角形に切り抜く場合は clip-path が便利です。
例えば、正方形の要素に背景画像を指定して、三角形に切り抜く場合は次の指定行います。

.clip-path {

  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);

}

これは正方形の上下に合わせた面長な三角形になるため、正三角形の場合は次のように指定します。

.clip-path {

  clip-path: polygon(50% 0%, 0 85%, 100% 85%);

}

この場合、正方形に対して上付きで配置されているので、中央に表示したい場合は次のように指定します。

.clip-path {

  clip-path: polygon(50% 8%, 0 92%, 100% 92%);

}

CSS で画像を三角形に切り抜き（マスク）する方法を紹介しました。