我目前正在做一个小项目，我正在尝试创建一个表示加色的维恩图。我从三个圆圈开始（边界半径：50%；），并使用静态定位元素和隐藏溢出的组合来创建一些圆圈重叠的更复杂的形状。你可以在这里看到我目前拥有的东西：
我想添加的一个功能是在当前鼠标悬停的形状周围添加一个彩色框阴影。我面临的独特挑战是嵌套隐藏溢出的元素，以及需要创建“人造边缘”来为图表的每个部分呈现框阴影。我考虑过简单地放弃这种方法并通过 SVG 创建形状的选项，但我很想看看你们中是否有人有任何聪明的想法，可以单独使用传统的 HTML 和 CSS3 将这种交互构建成更复杂的形状。
提前致谢！