Как сделать border-radius наоборот?

Проблема, думаю, ясна. Подскажите как сделать такое?
1aaaf2a6561040c88b5c13efe528562d.jpg
  • Вопрос задан
  • 3289 просмотров
Решения вопроса 1
iiil
@iiil
Инженер и вэб-дизайнер, рисую.
upd
Если нужна юзабельность карты только внутри круга, то в голову приходит только svg
codepen.io/iiil/pen/JpBaE
Зато заметьте, как работает отлично, карта работает только в области круга (а не приямоугольника), за счет все того же
pointer-events: none;который, как говорят, и был придуман в свое время для svg.
Кроме того, Вы можете сделать более сложный svg, к примеру, чтобы был доступ до объектов управления картой — вырезать окна для них.

codepen.io/iiil/pen/Bwhjq
С картой надо будет работать? Тогда как вариант: pointer-events: none;
Саму маску с помощью бордеров, или как тут указывали — с помощью радиального градиента и псевдообластей.
P.S. Учитывая несколько предложенных абсолютно разных вариантов — из Вашего рисунка все-таки не все понятно )
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
Fesor
@Fesor
Full-stack developer (Symfony, Angular)
самый простой вариант - два слоя. Один - карта с оранжевым оверлеем. Второй - круг, с обычной картой с замощением полупрозрачных бордеров.
Ответ написан
barkalov
@barkalov
Суть такова.
Если блок делать размером не 100% от вьюпорта, то будет немного сложнее — в mousemove надо будет пересчитывать координаты бэкграунда. То есть надо убрать background-attachment: fixed; и считать правильный background-position.
Ответ написан
Taraflex
@Taraflex
Ищу работу. Контакты в профиле.
Ваш ответ на вопрос

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

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