私は現在、加法混色を表すベン図を作成しようとしている小さなプロジェクトに取り組んでいます。3 つの円 (border-radius: 50%;) から始めて、静的に配置された要素と隠しオーバーフローの組み合わせを使用して、円が重なり合うより複雑な形状をいくつか作成しました。私が現在持っているものを見ることができます：
追加したい機能の 1 つは、現在マウス オーバーされている図形の周りに色付きのボックス シャドウを追加することです。私が直面しているユニークな課題は、隠されたオーバーフローを持つ要素のネストと、ダイアグラムの各セクションのボックス シャドウをレンダリングするための「フェイク エッジ」を作成する必要性によって提示されます。私は単純にこのアプローチを破棄して SVG を介して形状を作成するオプションを検討しましたが、従来の HTML と CSS3 のみを使用して、この種の相互作用をより複雑な形状に構築するための賢いアイデアがあるかどうかを知りたいです。
前もって感謝します！