マスク、クリップパス(CSS)

前書き

HTMLコーディングに使える、マスク、クリップパスに関する小技を掲載しています。

目次

  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);
}

クリップパス

  • 四角形
    inset

  • circle
  • 楕円
    ellipse
  • 三角形
    polygon
  • ベベル
    polygon

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」

関連記事

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

色、グラデーション(CSS)

先頭に戻る
ページの先頭に戻る