如何使用纯CSS实现指定图片设计（不使用背景图仅允许用背景色）

安全阿岳

2026-9-25

设计效果图

实现方案

你需要的效果可以通过纯CSS元素叠加实现，完全不使用background-image属性，仅通过background-color设置背景即可完成，核心思路是用和下层区域同色的圆形伪元素模拟上层的缺口：

实现步骤

先拆分上下两个区域，分别设置对应的background-color
给上层区域开启相对定位，用其::after伪元素生成正圆形，背景色和下层区域完全一致
把圆形伪元素绝对定位到上层底部居中位置，Y轴偏移值设为圆形高度的一半，刚好形成半圆缺口
如果需要缺口外圈的白色描边效果，额外加一层尺寸更大的白色背景伪元素，z-index设为低于缺口伪元素即可

代码示例

<div class="top-block"></div>
<div class="bottom-block"></div>

/* 上层区域 */
.top-block {
  position: relative;
  height: 220px;
  background-color: #2E1A68; /* 对应设计稿的深紫色背景 */
}
/* 缺口白色外圈 */
.top-block::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -32px;
  transform: translateX(-50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background-color: #fff;
}
/* 缺口本体 */
.top-block::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -30px;
  transform: translateX(-50%);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #F0EFFF; /* 和下层区域背景色完全一致 */
}
/* 下层区域 */
.bottom-block {
  height: 500px;
  background-color: #F0EFFF; /* 对应设计稿的浅紫色背景 */
}