CSSでクリッピングマスクを使う方法

HTML&CSS

CSSでマスキングするにはクリピングマスクを使うことができます。
指定した要素にCSSで図形を描いて重ねることで、その図形以外の部分が非表示になります。

E { clip-path: shape }
shapeはcircle(r at cx cy),ellipse(rx ry at cx cy),
inset(o1,o2,o3,o4),polygon(各座標指定)のどれかで指定

マスキングするための形状は、clip-pathの値に円形の「circle()」,楕円の「ellipse()」,長方形の「inset()」,多角形の「polygon()」を描く関数で指定します。

円形の「circle()」

サンプル
100pxの半径で、要素の中央となる座標がx軸50%y軸50%の場合

.circle{
  clip-path: circle(100px at 50% 50%);
}

楕円の「ellipse()」

サンプル
x軸方向の半径100pxy、軸方向の半径50pxで、要素の中央となる座標がx軸50%y軸50%の場合

.ellipse{
  clip-path: ellipse(100px 50px at 50% 50%);
}

長方形の「inset()」

サンプル
それぞれの引数は順に上、右、下、左の各辺の座標となります。最後に「round 角丸半径」をつけると角丸になります。

.inset{
  clip-path: inset(100px 50px 100px 50px round 20px);
}

多角形の「polygon()」

サンプル
多角形を作成する関数には、2つの値の組を複数個指定します。
それぞれの組が座標となり、これらを結ぶ線がクリップパスになります。

.polygon{
  clip-path:polygon(0% 100%,100% 0%,0% 0%);
}

clip-path作成支援ページ

ポリゴンは直感的に座標を指定することが難しいです。
下記のサイトを活用すると良いです。

bennettfeely.com

CLIP PATH (MASK) GENERATOR

タイトルとURLをコピーしました