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

问题描述

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

这就是我所拥有的

这是理想的结果

我尝试使用 linear-gradient 将其变成一半，为了将顶部变成圆形，我使用了 border-radius: 50% 但这也适用于我拥有的底部背景

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

解决方法

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

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

.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>

,

您也可以使用 radial-gradient

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

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