How to fill circle based on a value in CSS [duplicate]

Question

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

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

If value is 30, I just want to fill the circle 30% with a color let it be red. How do i do this using only css?

EDIT to answer @AMIT

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

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

It is 100% filled circle. So I hope you clear now what I mean by 30% filled circle.

If it is possible by CSS, it will be compatible. Why not?

EDIT

A google Image to answer filled link

Answer 1

Use the opacity. It is a value between 0 (=transparent) and 1 (=opaque), so 30% is 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>

EDIT based on your comment, you want 30% of the circle which is 360 degrees, so 360 x 30% = 108. To do so, use a background-image:

1. Draw a vertical red linear-gradient, meaning with -90 degree. This will fill half of the circle with red.
2. Draw a white linear-gradientwith the degree -18 (=108-90). This will cover the part of the red half that exceeds 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>