背景マスク｜テンプレート2024

BACKGROUND MASK背景マスク

背景マスク:楕円形

背景を重ねる場合は上下のmargin-topで調節する

//clip-pathでのマスク:CSS
//楕円形(X横 Y縦 at 座標X:0から右に50% 座標Y:0から下に60%)
-webkit-clip-path: ellipse(90% 60% at right 50% bottom 60%);
clip-path: ellipse(90% 60% at right 50% bottom 60%);

背景マスク:ポリゴン

背景を重ねる場合は上下のmargin-topで調節する

//clip-pathでのマスク:CSS
//ポリゴン(右上の点座標X 右上の点座標Y, 左上の点座標X 左上の点座標Y, 右下の点座標X 右下の点座標Y, 左下の点座標X 左下の点座標Y)
-webkit-clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);

背景マスク:SVG

背景を重ねる場合は上下のmargin-topで調節する

//maskでのマスク:CSS
//SVG画像を用意してマスクする。波の線と四角の2つを用意。
mask-image: url("../img/wave.svg"), url("../img/square.svg");
mask-repeat: repeat-x, no-repeat;
mask-position: center bottom -1px, center top;
mask-size: 60%, cover;
mask-composite: exclude;

/* Chrome, Safari用 */
-webkit-mask-image: url("../img/wave.svg"), url("../img/square.svg");
-webkit-mask-repeat: repeat-x, no-repeat;
-webkit-mask-position: center bottom -1px, center top;
-webkit-mask-size: 60%, cover;
-webkit-mask-composite: exclude;