CSSのclip-pathを使って「真ん中を切り抜いたマスク」を作成したお話しです。
clip-path使ってみた
View Slide
このマスクの部分、皆さんならどう実装しますか?物件登録時に所在地を指定するモーダル
選ばれたのは…
clip-pathでした。
clip-pathの基本的な使い方clip-path: clip-path:[ || ]clip-source:URLでSVG要素を参照 basic-shape:CSS Shapes仕様で定義されている基本シェイプ機能を指定(inset, circle, ellipse, poligon) geometry-box:basic-shapeと組み合わせて指定すると、basic-shapeでのリファレンスボックスのようになります。 ※具体的な指定方法は不明です。
https://bennettfeely.com/clippy/CSS generator 『Clippy』① ⑩⑨② ③ ⑧④ ⑤⑥⑦① ② ③ ④ ⑥ ⑦ ⑧ ⑨⑤ ⑩
468px468px1198px30.5% 30.5%39%10.2%10.2%79.6%588px𝒙𝐲
clip-path: polygon(0% 0%,0% 100%,30.5% 100%,30.5% 10.2%,69.5% 10.2%,69.5% 89.8%,30.5% 89.8%,30.5% 100%,100% 100%,100% 0%);①②③④⑤⑥⑦⑧⑨⑩① ⑩⑨② ③ ⑧④ ⑤⑥⑦
.modal-map__mask{position: absolute;top: 0;left: 0;background-color: rgba(0, 0, 0, .7);width: 1198px;height: 588px;clip-path: polygon(0% 0%, 0% 100%,30.5% 100%, 30.5% 10.2%, 69.5% 10.2%,69.5% 89.8%, 30.5% 89.8%, 30.5% 100%,100% 100%, 100% 0%);z-index: 9;}
できた…
と思いきや…
レスポンシブ対応ができていない …
widthを100%にすればええんや!
切り抜き部分も可変になってしまっている …
この部分 = 1198px - 100%
(1198px - 100%)の半分の値分左にずらせばええんや!
@include breakpoint-down(desktop) {left: calc((100% - 1198px) / 2);}
完成。
おまけclip-pathでアニメーションhttps://jsfiddle.net/takahori/jhpd4nxm/136/