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

Question

[Alexander Mischuk]

Проблема, думаю, ясна. Подскажите как сделать такое?

Comments

[Alexander Mischuk]

Карта должна быть активна только в области вне оранжевого слоя.

Answer 1

[Юрий Лобанов]

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

codepen.io/iiil/pen/Bwhjq
С картой надо будет работать? Тогда как вариант: pointer-events: none;
Саму маску с помощью бордеров, или как тут указывали — с помощью радиального градиента и псевдообластей.
P.S. Учитывая несколько предложенных абсолютно разных вариантов — из Вашего рисунка все-таки не все понятно )

Comments

[Alexander Mischuk]

Очень близко, да. Почему-то сразу в голову не пришло решение это с кругом и бордером. Только pointer-events делает карту активной по всей области, вне зависимости от маски, а карта должна быть активна только в это круге. Даже, если вставить полупрозрачный круг с помощью псевдоэлементов и использовать pointer-events, то это тоже будет немного нето, хотя довольно близком к решению.

[Юрий Лобанов]

@Mischuk я дополнил ответ, посмотрите.

[Alexander Mischuk]

@iiil Да, спасибо, отличное решение. Пора изучать svg.

[Евгений Петров]

@Mischuk отличное — отметьте как решение ответ @iiil

[Юрий Лобанов]

@Mischuk ) а чего его изучать? Почитайте спецификацию, а конкретно в этом примере я вообще быстренько нарисовал в ai и сохранил как есть. Работать с ним легко, те же классы, те же объекты для jquery.

Answer 2

[Сергей Протько]

самый простой вариант - два слоя. Один - карта с оранжевым оверлеем. Второй - круг, с обычной картой с замощением полупрозрачных бордеров.

Comments

[Alexander Mischuk]

Не совсем понял. Чем отличается "карта" от "обычной карты"? Дважды нужно инициализировать карту или что?

Answer 3

[barkalov]

Суть такова.
Если блок делать размером не 100% от вьюпорта, то будет немного сложнее — в mousemove надо будет пересчитывать координаты бэкграунда. То есть надо убрать background-attachment: fixed; и считать правильный background-position.

Answer 4

[Александр Таратин]

https://developer.mozilla.org/en-US/docs/Web/CSS/r...

Хотя проще наверное через svg

Comments

[Александр Таратин]

еще можно через raphael будет работать от ie5.5+ raphaeljs.com/playground.html

[Alexander Mischuk]

Я думаю, что есть решение проще и легче. Думаю, сейчас в сторону трансформаций, тени и рамок, но только что-то тяжеловато уже думает в двенадцать ночи )