CSSのmask-imageプロパティで要素の形を自由自在に変える方法

今回は、CSSのmask-imageプロパティを使って要素の形を変える方法について解説します。mask-imageプロパティは、要素にマスクを適用して、特定の形に切り取ることができます。

以下のコード例を見てみましょう。

div {
    mask-image: url(../img/common/image.png);
    -webkit-mask-image: url(../img/common/image.png);
    mask-size: contain;
    -webkit-mask-size: contain;
    background-color: #333;
}

コードの解説

1.　mask-imageプロパティ: 要素に適用するマスクの画像を指定します。画像の透明部分が要素の表示部分となり、不透明部分は隠されます。

mask-image: url(../img/common/image.png);
-webkit-mask-image: url(../img/common/image.png);

2.　mask-sizeプロパティ: マスク画像のサイズを指定します。ここではcontainを使用して、マスク画像が要素内に収まるように調整しています。

mask-size: contain;
-webkit-mask-size: contain;

3.　background-colorプロパティ: 要素の背景色を指定します。マスクの効果を確認しやすいように、ここでは暗い背景色（#333）を設定しています。

background-color: #333;

このように、mask-imageプロパティを使うと、画像を使って要素の形を自由にコントロールできます。