如何仅使用css就拥有具有不同形状的多个背景？

我想在我们的时间选择器组件中为所选日期创建一个两层背景，其中顶层是一个圆形，底层是一个半方形

这就是我所拥有的

这是理想的结果

我试着用

线性渐变

将它变成一半，为了使顶部成为一个圆，我使用了

边界半径：50%

，但这也适用于我的底部背景

---

任何提示都会有帮助，谢谢

您可以使用径向渐变和线性渐变进行此操作

为了让您开始，这里是一个近似值-您需要更改各种维度，以获得您想要的日历

.bg{
宽度：100px；
高度：50px；
背景图像：径向渐变（25%处的最近边圆圈，蓝色0，蓝色100%，透明100%，透明），线性渐变（右侧，透明0，透明25%，青色25%，青色100%）；
背景尺寸：100%100%，75%100%；
背景重复：无重复；
背景位置：25%50%，0；
}

---

您也可以使用

径向梯度

.background{
宽度：200px；
高度：100px；
背景：径向梯度（圆形为25%，#1565C0 5%，#1565C0 31%，透明31%），线性梯度（向右，透明0，透明25%，#CCE1F5 25%，#CCE1F5 100%）；
}

请包含当前代码的一部分。