html - 60% 異なる色の CSS3 リングを作成する

Question

以下のようなリングを作成しようとしています。

ページには 5 つまたは 6 つあり、それぞれ異なるレベルのオレンジ色のセクションがリングを回っています。

例えば。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から

要素の境界線に色を追加するだけですが、これは私の目標を達成するのに実際には役立ちません。

これはおそらくキャンバスで行うことができますが、可能であればキャンバスを使用しないで見たいと思っていました。

前もってありがとう、トム