Upgrade to Pro — share decks privately, control downloads, hide ads and more …

clip-path使ってみた

 clip-path使ってみた

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

tatsumiakahori

February 05, 2021
Tweet

More Decks by tatsumiakahori

Other Decks in Programming

Transcript

  1. clip-path使ってみた

    View Slide

  2. このマスクの部分、皆さんならどう実装しますか?
    物件登録時に所在地
    を指定するモーダル

    View Slide

  3. 選ばれたのは…

    View Slide

  4. clip-pathでした。


    View Slide

  5. clip-pathの基本的な使い方
    clip-path:  

    clip-path:[ || ]
    clip-source:URLでSVG要素を参照

    basic-shape:CSS Shapes仕様で定義されている基本シェイプ機能を指定(inset, circle, ellipse, poligon)

    geometry-box:basic-shapeと組み合わせて指定すると、basic-shapeでのリファレンスボックスのようになります。

    ※具体的な指定方法は不明です。


    View Slide

  6. https://bennettfeely.com/clippy/
    CSS generator 『Clippy』
    ① ⑩

    ② ③ ⑧
    ④ ⑤


    ① ② ③ ④ ⑥ ⑦ ⑧ ⑨
    ⑤ ⑩

    View Slide

  7. 468px
    468px
    1198px
    30.5% 30.5%
    39%
    10.2%
    10.2%
    79.6%
    588px
    𝒙
    𝐲

    View Slide

  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%
    );










    ① ⑩

    ② ③ ⑧
    ④ ⑤


    View Slide


  9. .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;
    }

    View Slide

  10. できた…

    View Slide

  11. と思いきや…

    View Slide

  12. レスポンシブ対応ができていない …

    View Slide

  13. widthを100%にすればええんや!

    View Slide

  14. 切り抜き部分も可変になってしまっている …

    View Slide

  15. この部分 = 1198px - 100%

    View Slide

  16. (1198px - 100%)の半分の値分左にずらせばええんや!

    View Slide

  17. @include breakpoint-down(desktop) {
    left: calc((100% - 1198px) / 2);
    }

    View Slide

  18. 完成。

    View Slide

  19. おまけ
    clip-pathでアニメーション
    https://jsfiddle.net/takahori/jhpd4nxm/136/

    View Slide