如何用 CSS 实现四瓣花形重叠区域的精准着色-html教程-PHP中文网

如何用 CSS 实现四瓣花形重叠区域的精准着色

本文详解如何通过 CSS Grid 与 border-radius 组合技巧，无需 JavaScript 或 SVG，仅用纯 CSS 构建可精确控制重叠区域颜色的四瓣花朵图形。

本文详解如何通过 css grid 与 `border-radius` 组合技巧，无需 javascript 或 svg，仅用纯 css 构建可精确控制重叠区域颜色的四瓣花朵图形。

在传统布局中，多个绝对定位

的重叠区域（如四瓣花中心）本质上是视觉叠加效果，并非一个独立可选中的 DOM 元素——因此无法直接为“交集”设置背景色。原方案中使用四个带 border-radius 的圆形 div 拼接，虽能形成花瓣形态，但中心重叠区实为四层颜色堆叠（z-index 层叠），无法单独着色。

正确解法：将整个花朵视为一个整体容器，用子元素模拟“四分之一圆弧”，并通过 grid 精确布局与 border-radius 控制弧形方向，使四块弧形在中心无缝交汇——此时交叠区域自然成为统一、可控的视觉中心。

以下为推荐实现方案：

.flower {
  width: 160px;
  height: 160px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 0;
}

.flower i {
  border-radius: 50% 0 0 0; /* 默认：左上四分之一圆 */
  background-color: lightskyblue;
}

/* 调整各象限弧形方向 */
.flower i:nth-child(1) {
  border-radius: 50% 0 0 0;   /* 左上 */
  background-color: yellow;
}

.flower i:nth-child(2) {
  border-radius: 0 50% 0 0;   /* 右上 */
  background-color: green;
}

.flower i:nth-child(3) {
  border-radius: 0 0 0 50%;   /* 左下 */
  background-color: blue;
}

.flower i:nth-child(4) {
  border-radius: 0 0 50% 0;   /* 右下 */
  background-color: orange;
}

<div class="flower">
  <i></i>
  <i></i>
  <i></i>
  <i></i>
</div>

✅ 关键原理说明：

grid-template-columns: 1fr 1fr + grid-template-rows: 1fr 1fr 将容器均分为 2×2 网格，每个 占据一个象限；
border-radius: a b c d 中，仅对单个角设为 50%（即半径 = 元素宽高的一半），其余为 0，即可生成标准四分之一圆弧；
四个弧形在中心点完全对齐，视觉上自然融合成一朵花，中心白色（或透明）区域即为所有弧形共同留白的交叠核心——若需为其着色，只需为 .flower 添加 background-color（例如 #fff 或 #ff6b6b），它将透过弧形间隙清晰显现。

⚠️ 注意事项：