使用边框绘制圆的扇形答案

【问题标题】：Draw a circle's sector using its borders使用边框绘制圆的扇形
【发布时间】：2015-11-16 13:19:23
【问题描述】：

如下图：

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

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

&lt;div class="circle"&gt;&lt;/div&gt;

【问题讨论】：

This 可以帮助您。
非常感谢，但本文展示了如何使用背景色绘制图表。我只想使用边框。
你为什么这么想只用边框做呢？用边框几乎不可能做到这一点，因为 (a) 普通边框不能产生渐变 (b) 可以产生渐变的 border-image 不会产生圆形（不会被剪裁）。
@Harry 我认为你是对的，我用几种技术尝试了几次。可以使用 SVG 吗？
@user3638463：是的，这应该可以使用 SVG 或 Canvas。

标签： css css-shapes

【解决方案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>

【讨论】：