4

我正在尝试创建一个如下所示的戒指：

CSS3 环

页面上将有 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

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

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

在此先感谢，汤姆

4

1 回答 1

6

在我看来，你几乎有你的答案。您可以使用pseudo-elementandrotate隐藏/显示部分边框以按边框在 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>
于 2013-07-12T16:16:13.280 回答