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