Create CSS3 ring with 60% a different colour - html

Question

I'm trying to create a ring like the one below:
There will be 5 or six on the page, each with a different level of the orange section going around the ring.
eg. 2 may have 50%, 1 has 30%, 1 has 80%, 1 40%
I can get the orange to be either 25%, 50%, 75%, 100% by following this:
<div class="wrapper">
<div class="arc arc_start"></div>
<div class="arc arc_end"></div>
</div>
.wrapper {
position:relative;
margin:20px;
}
.arc {
position:absolute;
top:0;
left:0;
width:100px;
height:100px;
border-radius:100%;
border:1px solid;
}
.arc_start {
border-color:transparent red red red;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.arc_end {
border-color:red red red transparent;
-webkit-transform: rotate(75deg);
-moz-transform: rotate(75deg);
-ms-transform: rotate(75deg);
-o-transform: rotate(75deg);
transform: rotate(75deg);
}
from this jsfiddle
As its just adding colour to the border of the elements, but this doesn't really help me achieve my goal.
I could probably do this is canvas, but wanted to see if possible not using canvas.
Thanks in advance,
Tom

Answer 1

It seems to me that you almost have your answer.
You could use pseudo-element and rotate to hide/show portion of borders to draw in between 0,25,50,75 and 100% overlapping borders by borders.
http://codepen.io/gcyrillus/pen/JzmiE
div {
height:200px;
width:200px;
border:solid 5px black;
background:#159;
border-radius:100%;
display:inline-block;
margin:1em;
position:relative;
text-align:center;
line-height:200px;
color:white;
font-size:2em;
}
div:before,div:after {
content:'';
position:absolute;
top:-5px;
left:-5px;
border:solid 5px transparent;
height:inherit;
width:inherit;
border-radius:inherit;
}
.c30, .c40, .c50 {
border-left-color:tomato;
border-bottom-color:tomato;
}
.c30:before {
border-left-color:black;
transform:rotate(18deg)
}
.c40:before {
border-bottom-color:tomato;
transform:rotate(54deg)
}
.c80 {
border-color:tomato;
border-right-color:black;
}
.c80:before {
border-left-color:tomato;
transform:rotate(54deg)
}
body {background: #456;}
and html
<div class="c30">c30</div>
<div class="c40">c40</div>
<div class="c50">c50</div>
<div class="c80">c80</div>
<p>i.e. calculate rotation needed : 30%-25% = 5% of 360deg equals 18deg to increase rotation of one border to add those 5.%</p>