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
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
780
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
510
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
470
MDN Web Docs に日本語翻訳でコントリビュートしたくなる
ohmori_yusuke
1
120
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
170
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
890
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
250
「テストは愚直&&網羅的に書くほどよい」という誤解 / Test Smarter, Not Harder
munetoshi
0
170
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
680
AIともっと楽するE2Eテスト
myohei
6
2.6k
効率的な開発手段として VRTを活用する
ishkawa
0
140
RailsGirls IZUMO スポンサーLT
16bitidol
0
180
Featured
See All Featured
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Rails Girls Zürich Keynote
gr2m
95
14k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Embracing the Ebb and Flow
colly
86
4.7k
Making Projects Easy
brettharned
116
6.3k
Documentation Writing (for coders)
carmenintech
72
4.9k
Scaling GitHub
holman
460
140k
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/