本文详解如何利用 css grid 与 border-radius 配合，通过单个容器内的四个伪花瓣元素实现可控的重叠区域着色，避免传统绝对定位下难以精准控制交集颜色的痛点。
本文详解如何利用 css grid 与 border-radius 配合，通过单个容器内的四个伪花瓣元素实现可控的重叠区域着色，避免传统绝对定位下难以精准控制交集颜色的痛点。
在构建如“四瓣花”这类对称交叠图形时，一个常见误区是试图用多个独立 <div> 绝对定位并依赖 z-index 层叠，再期望通过某种方式“提取”或“染色”它们的重叠部分——但纯 CSS 无法直接选择或样式化两个元素的几何交集区域。CSS 没有 :intersection-of(.a, .b) 这类选择器。因此，真正可行且可控的方案是：放弃让多个块级元素物理重叠后“计算交集”，转而用单容器内结构化、预设形状的子元素，使重叠效果在视觉上自然形成，且关键交叠区（即花瓣中心）由底层统一背景承载。
以下是一个简洁、语义清晰、响应友好且完全基于标准 CSS 的实现方案：
✅ 推荐实现：Grid + 四分圆角 <i> 元素
<div class="flower"> <i></i> <!-- 左上花瓣 --> <i></i> <!-- 右上花瓣 --> <i></i> <!-- 左下花瓣 --> <i></i> <!-- 右下花瓣 --> </div>
.flower {
width: 160px;
height: 160px;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
/* 中心交叠区底色 —— 即“花蕊”，覆盖所有花瓣重叠部分 */
background-color: #4F77FF;
}
.flower i {
width: 100%;
height: 100%;
border-radius: 100% 0 0 0; /* 默认：左上圆角 */
}
/* 调整各花瓣圆角方向，使其朝向中心汇聚 */
.flower i:nth-child(1) {
border-radius: 0 100% 0 0; /* 右上 */
background-color: yellow;
}
.flower i:nth-child(2) {
border-radius: 100% 0 0 0; /* 左上 */
background-color: green;
}
.flower i:nth-child(3) {
border-radius: 0 0 0 100%; /* 左下 */
background-color: blue;
}
.flower i:nth-child(4) {
border-radius: 0 0 100% 0; /* 右下 */
background-color: orange;
}? 原理说明：每个 <i> 元素被设为 100% × 100% 的网格单元，并通过不同方向的 border-radius 切出四分之一圆（即“花瓣”）。由于它们严格占据 2×2 网格的四个象限，且圆角均朝向中心点，四个弧形边缘自然在正中心交汇，形成一个被四色包围的圆形区域——该区域正是 .flower 容器的背景色（#4F77FF），也就是你想要“着色的重叠区域”。
⚠️ 注意事项与进阶提示
- 不要滥用 z-index 与绝对定位交叠：原问题中使用多个 .m 类 div 绝对定位虽能模拟花瓣，但因渲染层分离，中心交叠处实际是多层半透明色叠加（非精确混合），且无法单独控制交集颜色；同时响应式适配困难。
- <i> 标签在此仅为语义轻量的空容器，可替换为 <span> 或自定义元素，无需担心语义污染。
- 若需动态控制花蕊颜色，只需修改 .flower { background-color: ... } 即可，无需 JS 干预。
- 如需增大花蕊尺寸或添加描边，可在 .flower 上加 padding 或 box-shadow，或嵌套一层绝对定位的 ::before 伪元素。
✅ 总结
要“给两个 div 的重叠区域上色”，本质不是去“捕获交集”，而是重构布局逻辑，让交集成为设计的一部分。本方案以 Grid 为骨架、border-radius 为画笔、容器背景为画布，用 4 行 CSS 圆角规则和 4 种颜色，干净利落地交付可维护、可扩展、无 JS 依赖的四瓣花效果——这才是现代 CSS 解决视觉交叠问题的正确范式。
立即学习“前端免费学习笔记（深入）”；
