CSS:1/8长度的圆弧

Question

仅通过使用 CSS，我尝试创建具有一定宽度和颜色的圆弧，其长度是圆长度的 1/8 甚至更小(正如我想要的那样)达到整个圆各段之间有间隙的效果，见图。

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

参见 fiddle : 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);
}