В настоящее время я работаю над небольшим проектом, в котором я пытаюсь создать диаграмму venn, представляющую аддитивные цвета. Я начал с трех кругов (border-radius: 50%;) и использовал комбинацию элементов статической позиции со скрытым переполнением, чтобы создать некоторые из более сложных фигур, где круги перекрываются. Вы можете видеть, что я сейчас здесь:
Одной из особенностей, которую я хотел бы добавить, является добавление цветной тени для теней вокруг фигуры, которая в настоящее время вымывается. Уникальная задача, с которой я сталкиваюсь, представлена вложением элементов со скрытым переполнением и необходимостью создания "faux-edge", по которым визуализируется тень окна для каждого раздела диаграммы. Я рассмотрел возможность просто отказаться от этого подхода и создать формы через SVG, но мне интересно узнать, есть ли у кого-нибудь какие-нибудь умные идеи для построения такого рода взаимодействия в более сложные формы, используя только традиционные HTML и CSS3.
Спасибо заранее!
Как насчет использования CSS: после создания новых кругов за другими и использования радиального градиентного фона, который исчезает до прозрачности?
Я сделал быстрые базовые реализации для Webkit на красных и синих кругах. Обратите внимание на: hover: после определения стиля. http://jsfiddle.net/stevelove/2hpwp/