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

【问题标题】：How to have multiple backgrounds which have different shapes using only css?如何仅使用 css 来拥有具有不同形状的多个背景？
【发布时间】：2021-05-04 20:45:55
【问题描述】：

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

这就是我所拥有的

这是理想的结果

我尝试使用linear-gradient 将其减半，为了将顶部作为一个圆圈，我使用了border-radius: 50%，但这也适用于我的底部背景

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

【问题讨论】：

w3schools.com/howto/howto_css_shapes.asp
请包含您当前代码的minimal reproducible example。

标签： css background-color linear-gradients border-radius

【解决方案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;
    
}

&lt;div class="bg"&gt;&lt;/div&gt;

【讨论】：

【解决方案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%);
}

&lt;div class="background"&gt;&lt;/div&gt;

【讨论】：