创建具有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

因为它只是为元素的边框添加颜色，但这并没有真正帮助我实现目标。

我可能这样做是画布，但想看看是否可能不使用画布。

提前致谢， 汤姆

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>