最近tailwindcssを使ってることが多くなった来ました。
以前はSass/SCSSを使ってることがおおかったですが、
Sass/SCSSのいいところである変数やネストが使えるようになったことで
Sass/SCSSじゃなくてもいいかなって思うことがあったりもします。
mixinとか便利なことはまだあるので需要はあるでしょうが
いろいろと使って自分にあったのを見つけないとと模索している最中でございます。

さて本題に移りますが、clip-pathを最近ちょくちょく使います。
以前はそんなに使うことがなかったんです、角丸とかぐらいなら別にいらないし
そんな奇抜な形に画像をすることもないしって思ってたんです。

デザインやコーディングの参考にいろいろ見漁ってると結構つかってるんですね。
設定が簡単っていうのも有るんでしょうか。
今後主流になってくるかもってことで改めて調べたのでそれのメモです。

基本的な考え

基本的にはマスクです。シェイプでマスクするって感覚です。
丸だったり四角だったり多角形の形でマスクするイメージです。

正円 – circle()

clip-path: circle(半径 at x座標 y座標);
// 例
clip-path: circle(30px at 30% 70%);
clip-path: circle(50%);

ど真ん中の円なら最後のだけで問題ないですね。

四角 – inset()

clip-path: inset(上下左右辺からの距離)
clip-path: inset(上下辺からの距離 左右辺からの距離)
clip-path: inset(上辺からの距離 右辺からの距離 下辺からの距離 左辺からの距離)

楕円 – ellipse()

clip-path: ellipse(x距離 y距離 at x座標 y座標)

多角形 – polygon()

clip-path: polygon(線を結びたい座標);
// 例
clip-path: polygon(20px 0px, 0px 70px, 70px 70px);

path

pathを使えばもっと複雑な形にもできます。
SVGとかで使うようなパスを指定します

clip-path: path("M0.5 C.........")

簡単にマスクが使えるから覚えておくのもよいかと思います。