使用边框绘制圆圈的扇区

Question

如下图所示：

我想使用边框绘制一个圆圈的扇区，以便制作类似图表的东西，但如果可能的话我不想使用任何插件。

    .circle {
      background-color: transparent;
      border: 4px solid #0c8a98;
      border-radius: 100%;
      height: 50px;
      width: 50px;
    }

<div class="circle"></div>

Answer 1

这样做。边界需要单独添加。

.circle {
 width: 50px;
 height: 50px;
 background-color: transparent;
 border-top: none;
 border-bottom: 4px solid #0c8a98;
 border-left: 4px solid #0c8a98;
 border-right: 4px solid #0c8a98;
 border-radius: 100%;
}

<div class="circle"></div>