clip-pathというやつを知った
あるblockコンテンツの周りをborderで囲いたいが、四隅から少しの部分だけは線をつけたくないという要望をどう叶えるか悩んでいた(もう2週間くらい前のことだけど)
____
| | | | ____
↑イメージとしてはこんな感じ
borderはborder-radiusくらいしか装飾の方法を知らなかったので調べてみたが上記のようなborderを実現できるような方法は(border-xxxのようなCSSプロパティは)なさそうだった。
結果、どうやってたどり着いたかは覚えてないがclip-pathというプロパティを使うことで解決できた。
clip-path - CSS: カスケーディングスタイルシート | MDN
MDNの説明を見ても全然よく分からないのだけど、かなり色々なことができそう。
要素の中で表示する領域を細かく指定することで、その要素の表示したい部分だけを表示できるようにする、みたいな解釈をしている。
clip-pathの最初の要素としてbasic-shapeというのがあって、基本はinset(長方形) / circle(円) / ellipse(楕円) / polygon(多角形)のような決められたものを定義できるが、より自由に形状を定義したい場合はpathというのがあるらしい。
今回は「正方形の四隅の角から辺の数%だけ決められた部分を表示しない」という感じの見た目を作りたいので、polygonを利用した。
ただ、正直clip-pathの要素は覚えるのが極めて難しく、また覚える必要性もあまりなさそうだった。
色々調べていたら下記のclip-path makerというサイトを見つけた。
このサイトで実際に表示したい領域の形状をWYSIWYGな感じで作れて、その作った領域を表現できるCSSをそのままコピーできるという便利なもので、これに非常に助けられた。
というかこのclip-path makerがなかったら挫折してたかもしれない。
今後こういう要件が出てきたら出せる札として一つ手札が増えたので嬉しい。