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

Question

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

这就是我所拥有的

这是理想的结果

我试着用linear-gradient它来做一半，为了把上面的一个做成一个圆圈，我用过border-radius: 50%，但这也适用于我的底部背景

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

Answer 1

为此，您可以使用径向渐变和线性渐变。

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

.bg {
    width: 100px;
    height: 50px;
    background-image: radial-gradient(circle closest-side at 25%, blue 0, blue 100%, transparent 100%, transparent), linear-gradient(to right, transparent 0, transparent 25%, cyan 25%, cyan 100%);
    background-size: 100% 100%, 75% 100%;
    background-repeat: no-repeat;
    background-position: 25% 50%, 0 0;
    
}

<div class="bg"></div>

Answer 2

你也可以使用radial-gradient

.background {
  width: 200px;
  height: 100px;
  background: radial-gradient(circle at 25%, #1565C0 5%, #1565C0 31%, transparent 31%), linear-gradient(to right, transparent 0, transparent 25%, #CCE1F5 25%, #CCE1F5 100%);
}

<div class="background"></div>