CSSでマスキングするにはクリピングマスクを使うことができます。
指定した要素にCSSで図形を描いて重ねることで、その図形以外の部分が非表示になります。
E { clip-path: shape }
shapeはcircle(r at cx cy),ellipse(rx ry at cx cy),
inset(o1,o2,o3,o4),polygon(各座標指定)のどれかで指定
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作成支援ページ
ポリゴンは直感的に座標を指定することが難しいです。
下記のサイトを活用すると良いです。
