使用css创建多色弧

yv5phkfx 于 2023-06-07 发布在其他

关注(0)|答案(1)|浏览(154)

我正在尝试使用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>

css

来源：https://stackoverflow.com/questions/76369546/create-multicolor-arc-using-css

1条答案

按热度按时间

7ivaypg91#

使用多个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>

赞(0）回复(0）举报 2023-06-07

我来回答

使用css创建多色弧

1条答案

相关问题

热门标签

最新问答