gpt4 book ai didi

html - 如何在单个 div 内获得具有半径的不同颜色?

转载 作者:行者123 更新时间:2023-12-01 22:53:17 26 4
gpt4 key购买 nike

我正在尝试在单个中实现半径。好吧,让我展示一下我正在尝试和想要的东西:

.bar{
height: 20px;
border-radius: 2.5rem;
background: linear-gradient(to right, green 0%, green 50%,gray 50%,gray 100%);
}
<div class='bar'></div>
使用此代码,我得到了绿色的锐利右侧。我想要一个圆形的右侧,绿色结束。就像是 : enter image description here

你可以看到光滑的圆形绿色末端

最佳答案

你可以借助::after伪元素来实现

.bar{
height: 20px;
border-radius: 2.5rem;
background: gray;
position: relative;
}
.bar::after{
content: "";
position: absolute;
top:0;
left:0;
width: 50%;
height: 20px;
border-radius: 2.5rem;
background: green;
}
<div class="bar"></div>

关于html - 如何在单个 div 内获得具有半径的不同颜色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/73744218/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com