CSS：长度为1/8的圆弧

Question

仅使用CSS ，我试图创建一个宽度和颜色为圆的圆弧，长度为圆长的1/8或更小（我想要实现整个圆圈各段之间的间隙效果。请参见图示。

我尝试了边框半径和边框样式的组合，但这只得到1/4。

请参阅小提琴： http://jsfiddle.net/uc8wvtfb/

只有使用CSS才能实现这一目标？

HTML：

<div class="arc"></div>

CSS：

width: 50px;
height: 50px;
border-radius: 50%;
border-color: transparent transparent red transparent;
border-style: solid;
border-width: 0px 10px 10px 10px;

Answer 1

这是实现目标的一种方式：Fiddle。它是另一个上面的虚线边框。然后，您可以通过调整transform: rotate(30deg)值来调整短划线之间“间隙”的大小。

<强> CSS

.arc {
    margin: 0 auto;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 15px dashed red;
    position: relative;
}

.arc:after {
    content: '';
    width: 200px;
    height: 200px;
    border-radius: 50%;
    position: absolute;
    top: -15px;
    left: -15px;
    border: 15px dashed red;
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg);
}