sombra de cuadro de representación alrededor de formas no convencionales con HTML/CSS

Question

Actualmente estoy trabajando en un pequeño proyecto en el que estoy tratando de crear un diagrama de Venn que represente colores aditivos. Empecé con tres círculos (radio de borde: 50%;) y usé una combinación de elementos de posición estática con desbordamiento oculto para crear algunas de las formas más complejas donde los círculos se superponen. Se puede ver lo que tengo actualmente aquí:

http://jsfiddle.net/GjvEE/

Una característica que me gustaría añadir es la adición de un color box-shadow alrededor de la forma que actualmente se moused en off. El único desafío al que me enfrento se presenta al anidar los elementos con un desbordamiento oculto y la necesidad de crear 'faux-edges' (bordes falsos) a lo largo de los cuales se renderiza la sombra del recuadro para cada sección del diagrama. He considerado la opción de simplemente descartar este enfoque y crear las formas a través de SVG, pero estoy interesado en ver si alguno de ustedes tiene alguna idea inteligente para construir este tipo de interacción en formas más complejas usando solo HTML tradicional y CSS3.

¡Gracias de antemano!

Answer 1

¿Qué hay de usar CSS: después de generar nuevos círculos detrás de los demás y utilizar un fondo degradado radial que se desvanece a transparente?

He hecho implementaciones rápidas y básicas para Webkit en los círculos rojo y azul aquí. Tenga en cuenta el: hover: después de las definiciones de estilo. http://jsfiddle.net/stevelove/2hpwp/