Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
clip-path使ってみた
Search
tatsumiakahori
February 05, 2021
Programming
0
280
clip-path使ってみた
CSSのclip-pathを使って「真ん中を切り抜いたマスク」を作成したお話しです。
tatsumiakahori
February 05, 2021
Tweet
Share
More Decks by tatsumiakahori
See All by tatsumiakahori
Most Valuable Bug(?) ~インシデント未遂から得た学び~
tatsumiakahori
0
260
TSデザイン改修で得たCSS設計の学び
tatsumiakahori
0
360
リッチでいい感じなWebサイトをお金も労力もかけずに作る方法
tatsumiakahori
0
200
self introduction 2
tatsumiakahori
0
62
Self introduction-Tatsumi Akahori
tatsumiakahori
0
520
Other Decks in Programming
See All in Programming
ニーリーにおけるプロダクトエンジニア
nealle
0
950
MDN Web Docs に日本語翻訳でコントリビュートしたくなる
ohmori_yusuke
1
130
バイブコーディング超えてバイブデプロイ〜CloudflareMCPで実現する、未来のアプリケーションデリバリー〜
azukiazusa1
0
350
Agentic Coding: The Future of Software Development with Agents
mitsuhiko
0
130
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
12
7.1k
Android 16KBページサイズ対応をはじめからていねいに
mine2424
0
440
Goで作る、開発・CI環境
sin392
0
260
#QiitaBash MCPのセキュリティ
ryosukedtomita
1
1.5k
フロントエンドのパフォーマンスチューニング
koukimiura
5
2k
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
1k
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
220
Startups on Rails in Past, Present and Future–Irina Nazarova, RailsConf 2025
irinanazarova
0
250
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
970
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
282
13k
The Straight Up "How To Draw Better" Workshop
denniskardys
235
140k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
700
Gamification - CAS2011
davidbonilla
81
5.4k
Producing Creativity
orderedlist
PRO
346
40k
Transcript
clip-path使ってみた
このマスクの部分、皆さんならどう実装しますか? 物件登録時に所在地 を指定するモーダル
選ばれたのは…
clip-pathでした。
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でのリファレンスボックスのようになります。 ※具体的な指定方法は不明です。
https://bennettfeely.com/clippy/ CSS generator 『Clippy』 ① ⑩ ⑨ ② ③ ⑧
④ ⑤ ⑥ ⑦ ① ② ③ ④ ⑥ ⑦ ⑧ ⑨ ⑤ ⑩
468px 468px 1198px 30.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% ); ① ② ③ ④ ⑤ ⑥ ⑦ ⑧ ⑨ ⑩ ① ⑩ ⑨ ② ③ ⑧ ④ ⑤ ⑥ ⑦
<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; }
できた…
と思いきや…
レスポンシブ対応ができていない …
widthを100%にすればええんや!
切り抜き部分も可変になってしまっている …
この部分 = 1198px - 100%
(1198px - 100%)の半分の値分左にずらせばええんや!
@include breakpoint-down(desktop) { left: calc((100% - 1198px) / 2); }
完成。
おまけ clip-pathでアニメーション https://jsfiddle.net/takahori/jhpd4nxm/136/