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

Question

[Юрий Воронин]

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


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

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

Была идея еще использовать две картинки, но в данном случае, все равно большАя часть карты не кликабельна остается.

Comments

[n1ksON]

А нельзя всё вставить картинкой? Даже белую область? Тогда станет юзабельным

[Юрий Воронин]

n1ksON, а какой смысл от карты - картинки? карта должна быть рабочей (яндекс карты использую)

[Виталий Першин]

pointer-events: none; для слоев которые карту перекрывают и все станет юзабельным

Answer 1

[Максим Морев]

Стилям оверлея допишите pointer-events: none; - можно будет взаимодействовать с картой.
А дизайнеру двойка, любой креатив не должен идти вразрез с юзабилити.

Answer 2

[Арсений Матыцин]

1. Дизайнер, конечно, не очень умный. Бесспорно. Такие решения согласуются на тему адекватности и профессионализма верстальщика + ресурсозатрат на уровне человекочасов и клиента (браузера).
2. Это легко делается на SVG, оно по идее прямо в макете есть, с помощью самого SVG или CSS ты можешь применить маску.
3. Можно поизвращаться в бордер-радусами.

Answer 3

[xmoonlight]

Svg маской кропается и всё.