css circle div，边界扭曲约为圆周长的3/4

Question

我有一个圆形的div。我想在它周围添加一个仅包裹其周长的3/4的边框。示例：

到目前为止我的代码：

<div id="Circle"></div>
#Circle  {
 overflow:hidden;
display:block;
float:left;
width:auto;
height:auto;
position: relative;
border-radius:50%;
-moz-border-radius:50%;
-webkit-border-radius:50%;
-khtml-border-radius: 50%;
background:#eee;
border: 3px solid #01542c;
z-index: 9;
padding:50%;

}

https://jsfiddle.net/pm97beyx/1/

我目前的解决方案是在它上面制作一个div然后将它定位为掩盖以隐藏下面的边框，我会说非常粗糙。

Answer 1

让border-top透明：

#Circle  {
     overflow:hidden;
    display:block;
    float:left;
    width:auto;
    height:auto;
    position: relative;
    border-radius:50%;
    -moz-border-radius:50%;
    -webkit-border-radius:50%;
    -khtml-border-radius: 50%;
    background:#eee;
    border: 10px solid #01542c;
    border-top:10px solid transparent;
    z-index: 9;
    padding:50%;
}

结果：

JSFiddle Demo