本文详解如何通过 CSS Grid 与 border-radius 组合技巧，无需 JavaScript 或 SVG，仅用纯 CSS 构建四瓣花瓣布局，并精确控制各花瓣及其重叠区域的颜色表现，实现类似“四叶花”的视觉效果。
本文详解如何通过 css grid 与 `border-radius` 组合技巧，无需 javascript 或 svg，仅用纯 css 构建四瓣花瓣布局，并**精确控制各花瓣及其重叠区域的颜色表现**，实现类似“四叶花”的视觉效果。
要为多个
的特定重叠区域着色（例如四瓣花中心交汇处），直接使用绝对定位叠加多个圆形元素（如原方案中 .m 类）存在本质局限：CSS 本身不提供“交集区域检测”能力，也无法对重叠像素单独设置样式。因此，真正的解法不是“后处理重叠”，而是前置设计结构——让重叠区域天然成为可独立控制的 DOM 元素或伪元素。
推荐采用以下高效、语义清晰且完全基于 CSS 的方案：
✅ 推荐方案：Grid 布局 + 四分圆切片
利用 display: grid 将容器划分为 2×2 网格，每个网格单元绘制一个带单侧圆角的正方形，再通过 border-radius 配合方向控制，生成四个朝向中心的四分之一圆（即花瓣），其自然交汇形成的菱形中心区即为默认背景色区域——这正是我们可控的“重叠着色区”。
<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: #ff6b6b; /* 例如：珊瑚红 */
margin: 40px auto;
}
.flower i {
width: 100%;
height: 100%;
border-radius: 0; /* 重置默认 */
}
/* 左上花瓣：右下角圆角 → 向中心凸出 */
.flower i:nth-child(1) {
border-radius: 0 100% 0 0;
background-color: #ffd93d; /* 黄色 */
}
/* 右上花瓣：左下角圆角 */
.flower i:nth-child(2) {
border-radius: 100% 0 0 0;
background-color: #4ecdc4; /* 青绿色 */
}
/* 左下花瓣：右上角圆角 */
.flower i:nth-child(3) {
border-radius: 0 0 0 100%;
background-color: #44b5f5; /* 蓝色 */
}
/* 右下花瓣：左上角圆角 */
.flower i:nth-child(4) {
border-radius: 0 0 100% 0;
background-color: #ff6b6b; /* 橙红色，与中心同色强化统一感 */
}
? 关键原理：每个 是 80×80px 的正方形（因 Grid 2×2 自动均分），border-radius 仅激活一个角为 100%，其余为 0，从而形成标准四分之一圆弧。四者无缝拼合后，中心留白（实际由 .flower 的 background-color 填充），该区域即为逻辑上的“重叠着色区”，且完全独立可控。
⚠️ 注意事项与进阶提示
- 避免使用 z-index 叠加旧方案：原代码中依赖 z-index 和绝对定位的多个 .m 元素会导致重叠区域颜色不可控（底层颜色会被上层覆盖，无法“混合”），且响应式适配困难；
- 尺寸一致性至关重要：确保 .flower 宽高为偶数，且子元素严格均分（grid-template-columns/rows: 1fr 1fr），否则圆角对齐将偏移；
- 扩展性建议：若需动态控制中心色或添加阴影/动画，可为 .flower 添加 ::before 伪元素并设 z-index: -1，或使用 clip-path 进一步裁剪中心形状；
- 兼容性：该方案支持所有现代浏览器（Chrome 66+、Firefox 63+、Safari 16.4+），无需前缀。
此方法以结构换功能，将“难以着色的重叠区”转化为“天然可定义的中心背景”，兼具简洁性、可维护性与视觉精度，是 CSS UI 设计中“化复杂为简单”的典型实践。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
