Question

.circle
{
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 1px solid;
  }

<div class="circle">
  </div>
<div class="value">30</div>

如果值为30，我只想填充30％的圆圈，颜色为红色。我如何仅使用css？

编辑回答@AMIT

.fullCircle
{
  width: 100px;
  height:100px;
  bordeR: 1px solid;
  border-radius: 50%;
  background-color: #f00;
  }

<div class="fullCircle">
  </div>

100％填充圆圈。所以我希望你现在清楚我所说的30％填充圈。

如果可以通过CSS，它将是兼容的。为什么不呢？

修改

谷歌图片回复filled link

Answer 1

使用opacity。它是介于0（=透明）和1（=不透明）之间的值，因此30％为0.3。

.circle
{
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 1px solid;
  background-color: #ff0000;
  opacity: 0.3;
}

<div class="circle">
  </div>
<div class="value">30</div>

编辑根据你的评论，你想要360度的圆圈的30％，所以360 x 30％= 108.为此，请使用background-image：

绘制垂直红色linear-gradient，意思是-90度。这将用红色填充圆圈的一半。
绘制白色linear-gradient，度数为-18（= 108-90）。这将覆盖超过108（30％）的红色部分。

.circle
{
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 1px solid;
  background-image:
    linear-gradient(18deg, white 50%, transparent 50%),
    linear-gradient(-90deg, red 50%, transparent 50%);
}

<div class="circle"></div>
<div class="value">30</div>

如何根据CSS中的值填充圆

1 个答案: