マスク、クリップパス（CSS）

前書き

マスクやクリップパスに関することを掲載しています。

目次

1. マスク
2. クリップパス
3. 参考

マスク

p{ /* 文字でマスク */
  background-image: linear-gradient(to right,#a675a5 0%, #e7d4e3 100%);
  background-clip: text;
  color: transparent;
  display: inline-block;
}
div{ /* 星形（svg画像）でマスク */
  background-image: linear-gradient(to right,#a675a5 0%, #e7d4e3 100%);
  mask-image: url('icon.svg');
  mask-size: 20px;
  mask-repeat: repeat;
  mask-position: left top;
}
div{ /* linear-gradientでマスク */
  background-image: linear-gradient(to right,#a675a5 0%, #e7d4e3 100%);
  mask-image: repeating-linear-gradient(-45deg, transparent 0px 10px ,#fff 10px 20px);
}

クリップパス

div{ /* 四角形 */
  clip-path: inset(0% 0% 0% 0% round 5%);
}
div{ /* 円 */
  clip-path: circle(50% at 50% 50%);
}
div{ /* 楕円 */
  clip-path: ellipse(25% 50% at 50% 50%);
}
div{ /* 三角形 */
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
div{ /* ベベル（面取り） */
  clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
}

参考

Clippy — CSS clip-path maker

アイコン素材ダウンロードサイト「icooon-mono」

関連記事

CSSで文字に光彩のような効果を加える

クリップパスを動かす（HTML/CSS/JS）

CSSで文字に光彩のような効果を加える

文字に簡単な動きをつける（HTML/CSS/JS）

色、グラデーション（CSS）