5

.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

Gibbs
  • 21,904
  • 13
  • 74
  • 138
  • 2
    1. what exactly do you mean "*fill the circle 30%*"? 2. what makes you think it's possible? (I'm not entirely certain it's not, but highly likely that it's not) 3. even if there was a way, it will certainly not be backward compatible with a substantial install base, is that any good at all? – Amit Sep 29 '15 at 06:02
  • I have closed the question as a dupe based on your update to the question. – Harry Sep 29 '15 at 06:16
  • No Problem harry, Let me check whether It works for all cases. If not, I will edit the question – Gibbs Sep 29 '15 at 06:20
  • 2
    Actually your edit didn't answer my questions, but the linked answer did. In the future, try to describe exactly what you want, for example what does *filled* mean (Clockwise like the answer, middle -> out, circumference -> in, left -> right, transparent -> opaque or anything on your mind), 2nd, if you asked for a CSS solution only that reads the value from a text node on an unrelated element, how is the answer relevant? – Amit Sep 29 '15 at 06:21

1 Answers1

10

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>
Racil Hilan
  • 24,690
  • 13
  • 50
  • 55