如何用CSS实现多色弧形？现有代码未达预期求指导

我尝试用CSS实现类似下图的多色弧形效果，已尝试多种方案（如下方代码所示）但未成功。请问我遗漏了什么？有哪些改进建议？

现有尝试代码 #

CSS #

.container {
  margin: 0 auto;
  width: 100%;
  height: 200px;
  -webkit-mask-image: radial-gradient(65% 50% at top, transparent 80%, #fff 81%);
  
  mask-image: radial-gradient(65% 50% at top, transparent 80%, #fff 81%);
  
  background:linear-gradient(90deg, #FFC80B 50%, #FFC80B 51%, #13ADA8 51%);
}

HTML #

<div class="container"></div>

问题根源 #

你当前代码用mask-image实现了顶部的弧形遮罩，但背景用的是横向线性渐变，导致颜色分界是垂直直线，和目标效果的弧形颜色分界不匹配，这是核心问题。

改进建议与实现方案 #

要实现弧形的颜色分界，得把背景改成径向渐变，让颜色分界线和顶部弧形遮罩匹配，或者直接用径向渐变同时实现遮罩和颜色分界。

方案一：单径向渐变直接实现效果 #

不需要额外mask，直接通过径向渐变定义颜色区域，一步到位：

.container {
  margin: 0 auto;
  width: 100%;
  height: 200px;
  /* 径向渐变参数：形状大小 定位，透明区域，黄色区域，颜色分界点，青色区域 */
  background: radial-gradient(65% 100% at top, 
    transparent 80%, 
    #FFC80B 80%, 
    #FFC80B 80.5%, 
    #13ADA8 80.5%);
  /* 调整80%和80.5%的差值可以控制分界边缘的柔和度，差值越小边缘越锐利 */
}

方案二：保留mask，多背景渐变拆分颜色 #

如果需要更灵活的颜色调整（比如给单个颜色加渐变），可以保留mask，用两个径向渐变分别定义左右颜色区域：

.container {
  margin: 0 auto;
  width: 100%;
  height: 200px;
  -webkit-mask-image: radial-gradient(65% 50% at top, transparent 80%, #fff 81%);
  mask-image: radial-gradient(65% 50% at top, transparent 80%, #fff 81%);
  /* 左侧黄色渐变 + 右侧青色渐变 */
  background: 
    radial-gradient(65% 100% at top left, #FFC80B 80%, transparent 80%),
    radial-gradient(65% 100% at top right, #13ADA8 80%, transparent 80%);
  background-size: 50% 100%;
  background-position: left, right;
  background-repeat: no-repeat;
}

方案三：伪元素叠加适配复杂场景 #

如果需要给颜色区域加阴影、内边距等额外样式，用伪元素拆分左右颜色再统一遮罩更合适：

.container {
  margin: 0 auto;
  width: 100%;
  height: 200px;
  position: relative;
  -webkit-mask-image: radial-gradient(65% 50% at top, transparent 80%, #fff 81%);
  mask-image: radial-gradient(65% 50% at top, transparent 80%, #fff 81%);
}
.container::before, .container::after {
  content: "";
  position: absolute;
  top: 0;
  height: 100%;
}
.container::before {
  left: 0;
  width: 50%;
  background: #FFC80B;
  /* 可以在这里加阴影、渐变等样式 */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.container::after {
  right: 0;
  width: 50%;
  background: #13ADA8;
}

你可以根据实际需求（比如是否需要额外装饰、颜色过渡效果）选择对应的方案。

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