我試圖用CSS創(chuàng)建類似下圖的東西。我嘗試了一些不同的選項,包括下面的代碼,但沒有成功。我錯過了什么?有什么建議嗎?
.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>
使用多重徑向梯度
.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>