本文介绍一种无需 javascript、纯 css 实现“精准高亮多元素交集区域”的技巧，以四瓣花形重叠结构为例，通过 grid 布局与 border-radius 组合，将每个花瓣拆解为四分之一圆，使交叠中心自然形成可独立控制颜色的共享区域。
本文介绍一种无需 javascript、纯 css 实现“精准高亮多元素交集区域”的技巧，以四瓣花形重叠结构为例，通过 grid 布局与 border-radius 组合，将每个花瓣拆解为四分之一圆，使交叠中心自然形成可独立控制颜色的共享区域。
在传统绝对定位叠加多个 div（如原方案中四个 .m 元素）时，重叠区域本质上是视觉层叠效果，并无独立 DOM 节点——因此无法直接选中并上色。强行用伪元素或 z-index 层叠模拟交集，往往导致维护困难、响应式失效或边缘锯齿问题。真正稳健的解法是重构布局逻辑：从“叠加求交”转向“构造即交”。
核心思路是：将整个四瓣花视为一个整体容器，利用 CSS Grid 划分 2×2 网格，再通过 border-radius 为每个网格子项（<i>）设置定向圆角，使其恰好拼合成中心重叠的花瓣结构：
div {
width: 160px;
height: 160px;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
background-color: lightskyblue; /* 可选：底色，凸显交集 */
}
div i {
border-radius: 100% 0 0 0; /* 默认：左上四分之一圆 */
}
/* 调整各象限的圆角方向，确保四角向中心汇聚 */
div i:nth-child(1) { /* 左上 */
border-radius: 100% 0 0 0;
background-color: yellow;
}
div i:nth-child(2) { /* 右上 */
border-radius: 0 100% 0 0;
background-color: green;
}
div i:nth-child(3) { /* 左下 */
border-radius: 0 0 0 100%;
background-color: blue;
}
div i:nth-child(4) { /* 右下 */
border-radius: 0 0 100% 0;
background-color: orange;
}<div> <i></i> <i></i> <i></i> <i></i> </div>
✅ 为什么这样能精准控制交集？
四个 <i> 元素尺寸相同、无缝铺满父容器，且每个都仅渲染自身象限内的四分之一圆。它们的圆形边缘在容器中心严格交汇——该交汇点及其邻近微小区域（即视觉上的“花心”）天然成为所有四色的重叠域。由于该区域未被任何单一元素独占，其最终呈现的颜色由层叠顺序和透明度决定；若需突出显示此交集，可额外添加一个绝对定位的 ::before 伪元素置于中心，或直接设置父容器 background-color 作为底层高亮。
⚠️ 关键注意事项：
- border-radius 的百分比值基于元素自身宽高计算，因此必须确保所有 <i> 尺寸一致且父容器为正方形；
- 避免使用 transform: scale() 或 width/height 百分比缩放，否则圆角比例会失真；
- 若需响应式适配，建议用 clamp() 控制尺寸，或配合 aspect-ratio: 1 保障正方形结构；
- 此方法本质是几何构造而非动态检测，因此性能极佳，适用于动画、悬停等交互场景。
总结而言，与其在运行时“寻找重叠”，不如在设计时“定义重叠”。这种声明式、基于 CSS 原语的实现方式，既保持了代码简洁性，又赋予了交集区域完全可控的样式能力——这才是现代 CSS 解决复杂视觉问题的正确范式。
立即学习“前端免费学习笔记（深入）”；
