使用CSS概述圆形元素

Question

我有一个用以下样式创建的圆圈：

.circle {
  width: 150px;
  height: 150px;
  border-radius: 100%;
  -webkit-border-radius: 100%;
}

我想在这个圆圈周围有一个轮廓，但是，我希望它只是围绕圆圈的一部分来产生一个百分比。

例如：

• 50％将创建一个从12点开始到6点钟
的大纲
• 25％将创建一个从12点开始到3点钟的大纲
• 66％会创建一个从12点开始到8点钟
的大纲

作为宽度和高度的定义，我可以通过在相同的位置创建一个圆圈来创建一个轮廓，但我不知道如何创建一个＆＃39;馅饼＆＃39;形状

我也希望能够支持尽可能多的浏览器。

提前致谢。

Answer 1

基本上，您使用任何能够生成饼图的库，然后在饼图中放置一个圆圈，使其与您的页面（或元素的）背景颜色相匹配，使其看起来像一个甜甜圈（实际上是甜甜圈图表，你正在寻找）。当然，您只需使用两个片段即可。

https://github.com/azagniotov/pielicious

加载到http://raphaeljs.com/

即使在IE8上也能完美运行。

我在当前项目中将其改编为自定义knockout.js绑定。这就是结果：