Как сверстать такой элемент?

Question

[dzho]

Всем привет, тренируюсь верстать макеты возникла сложность с таким элементом как правильно его сверстать?

Answer 1

[Олег]

Как вариант https://jsfiddle.net/y7zjtr98/2/

Comments

[dhat]

А затемнение по кругу как реализовано?

[Олег]

dhat: градиентом

[dhat]

Олег: на картинке? Хм, тогда другой вопрос - а как сделать округлый градиент по картинке? Тут он прямоугольный, "обрезанный" бордер радиусом...

[Kovalsky]

dhat: у вас в примере тень не округлым градиентом сделана, а линейным, "прямоугольным"

[Олег]

dhat: https://jsfiddle.net/y7zjtr98/3/

[dzho]

это тень вообще картинка, я сделал но карта не показывает. Ну или показывает когда нажмешь z-index в firebige а после обновишь.

[Олег]

dzho:
1. Я только показал в какую сторону копать.
2. Тень не картинкой, linear-gradient

[dhat]

Олег: да я не об этом случае, как ПО КРУГУ всему сделать такую тень?

[dhat]

dzho: без разницы что в вашем случае, я спрашиваю о другом.

[Олег]

dzho: Вот вообще видны очертания ИМЕННО ПО РАДИУСУ https://jsfiddle.net/y7zjtr98/4/

[dzho]

Ребят спасибо за содействие

[Олег]

dhat: https://jsfiddle.net/Lmpyxqbf/

[dhat]

Олег: спасибо, круто. Буду знать!

[dhat]

dzho: поставь лайк и отметь ответом!

[Олег]

dhat: только на осла забей древнего

Answer 2

[Дима Паутов]

картинку на фон

Answer 3

[dom1n1k]

Лично я поговорил бы с дезигнером и попытася бы его уговорить убрать эту арку.
Это просто бессмысленная хрень от дизайнера, который не знал чего бы сюда такого втулить, ну и родил вот это.
Смотри - сделать-то можно. Наложить сверху див с фоновой картинкой или там svg-картинку - не проблема.
Но она будет мешать работать с картой (потянуть, зазумить). Потому что сверху будет этот див, а карта не получит мышиные события.

Comments

[Олег]

Можно с помощью js обойти и привязать мышь под слой ;)

[Олег]

Хотя не думаю. что карта на фоне дожна быть интерактивной.

[dom1n1k]

Просто обязана быть интерактивной - это я говорю больше даже как пользователь.

[Максим]

есть свойство pointer-events: none; которое даёшь диву сверху, и карта получит мышиные события

[dom1n1k]

Максим: Прикольно, вот про это не знал. Сейчас попробовал на яндекс-картах - работает.