如何使用CSS渐变实现半圆弧分割双色背景的div元素

直接用径向渐变就能实现你要的效果，核心思路是利用径向渐变的圆形边界作为分割线，结合背景层叠完成双色划分，完全符合你不使用伪元素、border-radius的要求。

完整代码示例 #

<div class="split-bg">这里是文本内容</div>

.split-bg {
  /* 基础尺寸，可按需调整 */
  width: 300px;
  height: 200px;
  /* 核心背景实现 */
  background: 
    radial-gradient(circle at right center, transparent 99.5%, #2563eb 100%),
    #f3f4f6;
  /* 文本样式（可选） */
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

原理说明 #

1. 径向渐变层：radial-gradient(circle at right center, transparent 99.5%, #2563eb 100%)
   • circle at right center：把渐变圆心定位在容器右侧中点
   • transparent 99.5%, #2563eb 100%：通过颜色断点让透明区和蓝色区无缝衔接，形成半圆边界（半径等于容器高度的一半）
2. 底层纯色背景：#f3f4f6作为右侧填充色，和径向渐变的蓝色区共同构成双色背景

参数调整技巧 #

• 适配动态尺寸：用calc()替换固定数值，比如radial-gradient(circle at right center, transparent calc(50% - 1px), #2563eb calc(50%))，容器高度变化时圆弧会自动适配
• 切换分割方向：把right center改成left center可实现左半圆分割；改成top center/bottom center可实现上下半圆分割
• 调整圆弧粗细：微调断点差值（比如99%和100%），就能改变分割线的粗细

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