反转css，将其划分为wo部分

Question

我有如下所示的div

div.button.fill {
  color: #FFFFFF;
  background-color: #ffcc00;
}

我想要着色，不是整个，而是在给定颜色中只有一半圆圈，另一半用另一种颜色(可能使用两个类，称为leftHalf和rightHalf)。

我正在尝试的代码是，如果左边的一半是白色的，里面的图像应该是半蓝色的，所以用户应该知道他们已经完成了一半的配置文件，当他们完成配置文件时，它就会像上面的图像一样显示。

Answer 1

您可以这样使用background-image: linear-gradient(...)来做到这一点。

​

div {
  color: #FFFFFF;
  background-image: linear-gradient(90deg,red 50%,yellow 50%);
  height: 100px;
  width: 100px;
  border-radius: 50px;
}

<div></div>

​

此外，如果你不设置一个显示后，每种颜色，他们将有一个平稳的过渡。

您还可以添加任意多个颜色。