Рендеринг теней вокруг нетрадиционных фигур с помощью HTML/CSS
В настоящее время я работаю над небольшим проектом, в котором я пытаюсь создать диаграмму Венна, представляющую аддитивные цвета. . Я начал с трех кругов (граница-радиус: 50%;) и использовал комбинацию статических элементов со скрытым переполнением, чтобы создать некоторые из более сложных форм, где круги перекрываются. Вы можете увидеть, что у меня сейчас есть здесь:
Одна функция, которую я хотел бы добавить, — это добавление цветной тени вокруг фигуры, над которой в данный момент находится мышь. . Уникальная проблема, с которой я сталкиваюсь, связана с вложением элементов со скрытым переполнением и необходимостью создания «фальшивых краев», вдоль которых будет отображаться тень блока для каждого раздела диаграммы. Я рассматривал вариант простого отказа от этого подхода и создания фигур с помощью SVG, но мне интересно узнать, есть ли у кого-нибудь из вас какие-нибудь умные идеи для создания такого взаимодействия в более сложных формах с использованием только традиционных HTML и CSS3.
Заранее спасибо!