如何根据CSS中的值填充圆

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 链接

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:

1. 画一个垂直的红色linear-gradient,意思是-90度.这将用红色填充圆圈的一半.
2. 绘制白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>