如何解决如何仅使用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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。