我正在尝试在单个中实现半径。好吧,让我展示一下我正在尝试和想要的东西:
.bar{
height: 20px;
border-radius: 2.5rem;
background: linear-gradient(to right, green 0%, green 50%,gray 50%,gray 100%);
}
<div class='bar'></div>
你可以看到光滑的圆形绿色末端
最佳答案
你可以借助::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/