Tạo bóng hộp xung quanh hình dạng độc đáo với HTML/CSS

Question

Tôi hiện đang làm việc trên một dự án nhỏ trong đó tôi đang cố gắng tạo sơ đồ venn đại diện cho màu phụ gia. Tôi đã bắt đầu với ba vòng tròn (bán kính đường viền: 50%;) và sử dụng kết hợp các yếu tố vị trí tĩnh với tràn ẩn để tạo ra một số hình dạng phức tạp hơn nơi các vòng tròn chồng lên nhau. Bạn có thể thấy những gì tôi đang có ở đây:

http://jsfiddle.net/GjvEE/

Một tính năng tôi muốn thêm là sự bổ sung của một màu hộp bóng xung quanh hình dạng hiện đang được moused giao. Thách thức duy nhất mà tôi đang đối mặt được trình bày bằng cách lồng ghép các phần tử có tràn ẩn và cần phải tạo 'các cạnh giả' dọc theo đó để hiển thị bóng hộp cho mỗi phần của biểu đồ. Tôi đã xem xét tùy chọn chỉ đơn giản là loại bỏ cách tiếp cận này và tạo các hình dạng thông qua SVG, nhưng tôi muốn xem liệu có bất kỳ ý tưởng thông minh nào để xây dựng loại tương tác này thành các hình dạng phức tạp hơn bằng cách sử dụng HTML và CSS3 truyền thống một mình hay không.

Cảm ơn trước!

Answer 1

Làm thế nào về việc sử dụng CSS: sau khi tạo vòng kết nối mới phía sau những người khác và sử dụng nền gradient xuyên tâm mờ dần trong suốt?

Tôi đã thực hiện nhanh chóng, triển khai cơ bản cho Webkit trên các vòng tròn màu đỏ và màu xanh lam tại đây. Lưu ý: hover: sau khi định nghĩa kiểu. http://jsfiddle.net/stevelove/2hpwp/