Создание CSS3 кольца с 60% в разных цветах

Question

Я пытаюсь создать кольцо, как показано ниже:

Там будет 5 или шесть на странице, каждый с разным уровнем оранжевая секция вокруг кольца.

например. 2 может иметь 50%, 1 имеет 30%, 1 имеет 80%, 1 40%

можно получить апельсин, чтобы быть 25%, 50%, 75%, 100% следуя:

<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); 
} 

из этого jsfiddle

Как его только добавление цвета к границе элементов, но это не помогает мне достичь своей цели.

Возможно, я мог бы сделать это - холст, но хотел посмотреть, возможно ли использовать холст.

Спасибо заранее, Том

Answer 1

Мне кажется, что вы почти есть свой ответ. Вы можете использовать pseudo-element и rotate, чтобы скрыть/показать часть границ, чтобы провести между 0,25,50,75 и 100% перекрывающимися границами по границам.

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;} 

и 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>