Ящик рендеринга тень вокруг нетрадиционных форм с HTML/CSS

Question

В настоящее время я работаю над небольшим проектом, в котором я пытаюсь создать диаграмму venn, представляющую аддитивные цвета. Я начал с трех кругов (border-radius: 50%;) и использовал комбинацию элементов статической позиции со скрытым переполнением, чтобы создать некоторые из более сложных фигур, где круги перекрываются. Вы можете увидеть, что я в настоящее время здесь:

http://jsfiddle.net/GjvEE/

Одна особенность, которую я хотел бы добавить, это добавление цветного коробчатого тень вокруг формы в настоящее время удерживал указатель мыши поверх. Уникальная задача, с которой я сталкиваюсь, представлена ​​вложением элементов со скрытым переполнением и необходимостью создания «faux-edge», по которым визуализируется тень окна для каждого раздела диаграммы. Я рассмотрел возможность просто отказаться от этого подхода и создать формы через SVG, но мне интересно узнать, есть ли у кого-нибудь какие-нибудь умные идеи для построения такого рода взаимодействия в более сложные формы, используя только традиционные HTML и CSS3.

Заранее благодарен!

Answer 1

Как насчет использования CSS: после создания новых кругов за другими и использования радиального градиентного фона, который исчезает до прозрачности?

Я сделал быстрые базовые реализации для Webkit на красных и синих кругах. Обратите внимание на: hover: после определения стиля. http://jsfiddle.net/stevelove/2hpwp/