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

Question

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

.bar{
  height: 20px;
  border-radius: 2.5rem;
  background: linear-gradient(to right,  green 0%, green 50%,gray 50%,gray 100%);
}

<div class='bar'></div>

使用此代码，我得到了绿色的锐利右侧。我想要一个圆形的右侧，绿色结束。就像是 :

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

Answer 1

你可以借助::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>