🐣

一番使いそうな clip-path を触っておく

2023/08/17に公開

ジェネレーターは

これが一番シンプルでよさそうな感じ。特に真剣には探していない。

clip-pathを調べると「画像をこんな形でくり抜けるよ！」みたいなのがたくさん出てくるが、自分が関わるような案件での登場頻度は低い。

おそらくよく使うことになるのはsection同士の境目を斜めにしたり複雑な矩形にする場合だろうと思うのでメモしておく。

.sec01 {
  clip-path: polygon(0 0, 100% 25%, 100% 100%, 0% 100%);
}

「X軸 Y軸」が1セットで、カンマで区切るたびにアンカーポイントが増えるイメージ。順番はそれほど気にせずとも左上から時計回りと考えればいい。（でもたぶん重要）

つまり上記のコードはこうなる。

.sec01 {
  clip-path: polygon(左端 上端, 右端 上から25%, 右端 下端, 左端 下端);
}

左上から右端の上から25%のポイントに向かって斜めに切られる感じだ。

逆にするなら？

.sec01 {
  clip-path: polygon(0 25%, 100% 0, 100% 100%, 0% 100%);
}

こうやって逆にすれば右上から左端の上から25%のポイントに向かって斜めに切られる感じ。

下側を斜めに切る場合は、

.left_to_right {
  clip-path: polygon(0 0, 100% 0, 100% 75%, 0 100%);
}
.right_to_left {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 75%);
}

こんな感じか。

理論さえわかってしまえば、複雑なカタチが必要な場合はジェネレータを利用した方が速い。

このclip-pathも角の部分を丸く処理できたりすれば吹き出しなんかにも使えてさらに便利だと思うけど、そうは上手くいかないみたいだ。