html - 使用 css 创建多色圆弧

Question

我正在尝试使用 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%);
}

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

Answer 1

使用多个radial-gradient

.container {
  height: 200px;
  background:
   /*               size    at position, colors*/
   radial-gradient(90%  80% at 50%  0  ,#0000 99%,blue),
   radial-gradient(115% 90% at 0    0  ,#0000 99%,#13ADA8),
   radial-gradient(115% 90% at 100% 0  ,#0000 99%,#FFC80B);
}

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