自由な形状にdivとかを切り抜いたりありとあらゆるところでぶち抜ける.
以下をstyleで記述するとその要素は、形状がマスクされて、その部分しか残らなくなる.
clip-path:
このマスクでくり抜かれている部分もそうでない部分も後ろ側にeventが透過して渡っている気がしている.(要出典)
clip-pathでは、circleとかinsetとか色々プリセットで使えるし、基本的にpolygonを使えばどんな図形もいける.
ただ、このpolygonは人手で%指定するのは正直無理がありすぎる…
そこで以下のツールを使えば完璧
https://bennettfeely.com/clippy/
こんな感じ.いつも通りThothChildrenのアイコン使用.
初めの20点くらいは色がつくけど、その後は真っ黒で色がつかないのは欠点….
遊びで作ったHauVisualizerではかなり複雑で50点以上の点を打って使用している.
Polygonは直線でしか結べなさそうなので要注意.
clip-path: polygon(13% 66%, 9% 67%, 6% 64%, 5% 61%, 7% 59%, 9% 56%, 10% 46%, 12% 39%, 13% 26%, 19% 24%, 20% 20%, 18% 15%, 20% 10%, 24% 9%, 28% 10%, 30% 14%, 28% 19%, 27% 21%, 28% 24%, 34% 26%, 36% 39%, 37% 44%, 38% 56%, 40% 57%, 42% 62%, 39% 67%, 34% 65%, 34% 57%, 31% 43%, 32% 60%, 31% 70%, 31% 81%, 30% 93%, 29% 97%, 33% 103%, 61% 104%, 58% 101%, 56% 98%, 58% 95%, 56% 81%, 56% 78%, 57% 74%, 57% 67%, 56% 61%, 53% 52%, 54% 42%, 53% 34%, 53% 27%, 56% 22%, 58% 20%, 55% 16%, 55% 12%, 60% 8%, 64% 9%, 67% 11%, 67% 16%, 68% 18%, 68% 21%, 65% 22%, 64% 25%, 66% 28%, 68% 32%, 67% 41%, 67% 48%, 67% 53%, 66% 59%, 65% 64%, 72% 63%, 75% 59%, 74% 55%, 73% 51%, 71% 45%, 74% 37%, 81% 35%, 86% 36%, 90% 38%, 92% 42%, 92% 45%, 94% 50%, 93% 52%, 92% 54%, 92% 59%, 87% 60%, 86% 63%, 72% 63%, 65% 64%, 66% 71%, 64% 77%, 63% 83%, 63% 89%, 62% 95%, 64% 100%, 67% 103%, 66% 105%, 61% 104%, 33% 103%, 29% 104%, 26% 102%, 24% 100%, 25% 93%, 24% 71%, 24% 64%, 24% 73%, 24% 79%, 23% 84%, 23% 89%, 23% 94%, 23% 98%, 23% 102%, 20% 105%, 14% 104%, 18% 98%, 18% 93%, 17% 81%, 16% 74%, 16% 69%, 15% 59%, 16% 53%, 17% 44%, 15% 50%, 13% 57%);
こんなの手で打てるわけない…
これでdivを好きな形にできる.
メッセージの形にくりぬいたりできるのはこのclip-pathのおかげ.
先のツールページに様々な形がプリセットで用意されているので是非見てみてください.
