クリップパスを使いたいんじゃ

使いたいんじゃ

CSSにはクリップパスなんていう良い感じに画像を切り抜いてくれる機能なんてものがありましてですね。僕もそういうの使って装飾とかしたいなーなんて思ったり思わなかったりしていたんですよ。だけどもCSSいじる機会ってそうそうなくて何もしないでいると記憶の中に風化してしまうのではと思ったので記事にしてメモっておくことにしました。

これな
developer.mozilla.org

使い方例にあるこのあたりによく使いそうな気がする。

clip-path: url(#myPath)

Assuming the following clipPath definition:
<svg>
  <clipPath id="myPath" clipPathUnits="objectBoundingBox">
    <path d="M0.5,1
      C 0.5,1,0,0.7,0,0.3
      A 0.25,0.25,1,1,1,0.5,0.3
      A 0.25,0.25,1,1,1,1,0.3
      C 1,0.7,0.5,1,0.5,1 Z" />
  </clipPath>
</svg>

SVGひっぱってきて画像などを切り抜いたりするやつ。そのままpathの中にもねじ込むこともできたりします。

実際に利用してみるとこんな感じ。

SVGと組み合わせて色々な形に切り抜くことができるってことで画像のカスタマイズが楽しくなるやつなんですけども、僕はSVGアートがそんな得意でないので使う機会に恵まれない……。

なんかに使いたいんだけどもねえ。

おわり