clip-path使ってみた

CSSのclip-pathを使って「真ん中を切り抜いたマスク」を作成したお話しです。

Transcript

1. clip-path使ってみた
2. このマスクの部分、皆さんならどう実装しますか？ 物件登録時に所在地 を指定するモーダル
3. 選ばれたのは…
4. clip-pathでした。

5. clip-pathの基本的な使い方 clip-path: <clip-source>　
 clip-path:[ <basic-shape> || <geometry-box> ] clip-source：URLでSVG<clipPath>要素を参照
 basic-shape：CSS Shapes仕様で定義されている基本シェイプ機能を指定（inset, circle, ellipse, poligon）
 geometry-box：basic-shapeと組み合わせて指定すると、basic-shapeでのリファレンスボックスのようになります。
 ※具体的な指定方法は不明です。

6. https://bennettfeely.com/clippy/ CSS generator 『Clippy』 ① ⑩ ⑨ ② ③ ⑧ ④ ⑤ ⑥ ⑦ ① ② ③ ④ ⑥ ⑦ ⑧ ⑨ ⑤ ⑩
7. 468px 468px 1198px 30.5% 30.5% 39% 10.2% 10.2% 79.6% 588px 𝒙 𝐲
8. 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% ); ① ② ③ ④ ⑤ ⑥ ⑦ ⑧ ⑨ ⑩ ① ⑩ ⑨ ② ③ ⑧ ④ ⑤ ⑥ ⑦
9. <div class="modal-map__mask"></div> .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; }
10. できた…
11. と思いきや…
12. レスポンシブ対応ができていない …
13. widthを100%にすればええんや！
14. 切り抜き部分も可変になってしまっている …
15. この部分 ＝ 1198px - 100%
16. (1198px - 100%)の半分の値分左にずらせばええんや！
17. @include breakpoint-down(desktop) { left: calc((100% - 1198px) / 2); }
18. 完成。
19. おまけ clip-pathでアニメーション https://jsfiddle.net/takahori/jhpd4nxm/136/