如何仅使用CSS实现带背景色div的右侧弧形边缘效果（不使用图片）

实现方案汇总 #

以下三种方案均不需要用到图片，仅靠CSS即可实现需求，可根据你的兼容性要求和弧形类型选择：

方案1：border-radius实现右侧外凸圆弧 #

适合需要右侧边缘向外凸起的弧形场景，代码最简单，兼容性最好：

.target-div {
  width: 200px; /* 自行替换为你的div尺寸 */
  height: 100px;
  background: #2385bb; /* 自行替换为你的背景色 */
  /* 调整两个圆角的水平、垂直半径即可控制凸起弧度 */
  border-top-right-radius: 100px 50px;
  border-bottom-right-radius: 100px 50px;
}

方案2：clip-path实现右侧内凹圆弧 #

适合需要右侧边缘向内凹陷的弧形场景，代码精简，现代浏览器均支持：

.target-div {
  width: 200px;
  height: 100px;
  background: #2385bb;
  /* ellipse参数依次为：水平半径、垂直半径、圆心水平位置、圆心垂直位置，按需调整即可修改凹弧深浅、弧度 */
  clip-path: ellipse(120px 50px at -20px 50px);
}

如果需要更精细的弧度控制，可以替换为自定义的path路径值。

方案3：伪元素模拟弧形（兼容低版本浏览器） #

如果需要兼容不支持clip-path的旧浏览器，可以用和外层背景同色的伪元素遮挡实现弧形效果：

.target-div {
  width: 200px;
  height: 100px;
  background: #2385bb;
  position: relative;
  overflow: hidden;
}
.target-div::after {
  content: "";
  position: absolute;
  width: 200px;
  height: 100px;
  border-radius: 50%;
  background: #ffffff; /* 此处替换为div外层的页面背景色 */
  left: 100px; /* 调整此值控制凹陷深度 */
  top: 0;
}

内容的提问来源于stack exchange，提问作者Wain2021