HTML/CSS로 비 전형적인 모양 주위의 렌더링 상자 그림자

Question

현재 추가 색상을 나타내는 venn 다이어그램을 만들려고하는 작은 프로젝트에서 작업 중입니다. 세 개의 원 (경계 반경 : 50 %;)으로 시작하고 숨겨진 오버플로가있는 정적 위치 요소의 조합을 사용하여 원이 겹치는 복잡한 모양을 만들었습니다. 내가 현재 여기에 무엇을 볼 수 있습니다 내가 추가 할

http://jsfiddle.net/GjvEE/

한 기능은 현재 마우스를 올리면 오버되는 모양 주위에 색 상자 그림자의 추가이다. 내가 직면하고있는 고유 한 과제는 숨겨진 오버플로가있는 요소의 중첩과 다이어그램의 각 섹션에 대한 상자 그림자를 렌더링하는 '모서리'를 만들어야한다는 것입니다. 이 방법을 폐지하고 SVG를 통해 셰이프를 만드는 옵션을 고려해 보았습니다.하지만 전통적인 HTML과 CSS3 만 사용하여 이러한 복잡한 상호 작용을보다 복잡한 모양으로 만드는 데 유용한 아이디어가 있는지 알고 싶습니다.

미리 감사드립니다.

Answer 1

CSS를 사용하는 방법 : 다른 사람들 뒤에 새로운 원을 생성하고 투명하게 사라지는 방사형 그라디언트 배경을 사용 하시겠습니까?

여기 빨간색과 파란색 원에 대한 Webkit의 빠른 구현을 수행했습니다. hover : 스타일 정의 다음에 유의하십시오. http://jsfiddle.net/stevelove/2hpwp/