Как сверстать карту с кривыми краями?

Добрый день. Дизайнер нарисовал вот такую карту
5eda807e129ed881156980.png

Я сверстал. Поверх карты расположил свг с прозрачной областью. Выглядит все как на макете, но такой вариант не юзабельный. С картой ничего не сделать.

Можно ли как то реализовать такой дизайн, что бы карта была юзабельна?

Была идея еще использовать две картинки, но в данном случае, все равно большАя часть карты не кликабельна остается.
5eda819e87d12093351468.png
  • Вопрос задан
  • 245 просмотров
Решения вопроса 4
SeaInside
@SeaInside
10 лет пилю все эти штуки
Стилям оверлея допишите pointer-events: none; - можно будет взаимодействовать с картой.
А дизайнеру двойка, любой креатив не должен идти вразрез с юзабилити.
Ответ написан
ArsenyMatytsyn
@ArsenyMatytsyn Куратор тега CSS
CEO iAmStudio, предприниматель.
1. Дизайнер, конечно, не очень умный. Бесспорно. Такие решения согласуются на тему адекватности и профессионализма верстальщика + ресурсозатрат на уровне человекочасов и клиента (браузера).
2. Это легко делается на SVG, оно по идее прямо в макете есть, с помощью самого SVG или CSS ты можешь применить маску.
3. Можно поизвращаться в бордер-радусами.
Ответ написан
xmoonlight
@xmoonlight
https://sitecoder.blogspot.com
Svg маской кропается и всё.
Ответ написан
sniggering_deus
@sniggering_deus Куратор тега CSS
I will live forever in the flame of your eyes.
Можно с помощью SVG сделать это или Clip-Path применить.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы