.circle{
width: 100px;
height: 100px;
border-radius: 100px;
border: 3px solid black;
background-color: green;
}
如何画扇形？给定一个度数X [0-360]我想画一个X度扇区。
我可以用纯CSS吗？
例如：
谢谢示例
谢谢Jonathan，我使用第一种方法。如果它帮助某人在这里的一个例子的JQuery函数，获取百分比和绘制一个扇区。扇区在百分比圆圈后面，并且该示例示出了如何从开始度数实现围绕圆的弧。
$(function drawSector(){
// Get degrees
...
// Draw a sector
if (deg <= 180){
activeBorder.css('background-image','linear-gradient(' + (90+deg) + 'deg,transparent 50%,#A2ECFB 50%),linear-gradient(90deg,#A2ECFB 50%,transparent 50%)');
}
else{
activeBorder.css('background-image','linear-gradient(' + (deg-90) + 'deg,#39B4CC 50%),transparent 50%)');
}
// Rotate to meet the start degree
activeBorder.css('transform','rotate(' + startDeg + 'deg)');
});
解决方法
而不是试图绘制绿色部分，你可以绘制白色部分：
pie {
border-radius: 50%;
background-color: green;
}
.ten {
background-image:
/* 10% = 126deg = 90 + ( 360 * .1 ) */
linear-gradient(126deg,white 50%),white 50%,transparent 50%);
}
演示：http://jsfiddle.net/jonathansampson/7PtEm/
可缩放矢量图形
如果它是一个选项，您可以使用SVG< circle>和< path>元素。考虑以下：
<svg> <circle cx="115" cy="115" r="110"></circle> <path d="M115,115 L115,5 A110,110 1 0,1 190,35 z"></path> </svg>
以上是相当简单的。我们有一个包含一个圆和一个路径的元素。圆的中心位置为115×115(使SVG元素为230×230)。该圆的半径为110，使其总宽为220(留下边框为10)。
然后我们添加一个< path>元素，这是该示例的最复杂的部分。此元素具有一个属性，它确定路径的绘制位置和路径。它从以下值开始：
M115,115
这指示路径在上述圆的中心开始。接下来，我们从这个位置绘制一条线到下一个位置：
L115,5
这从圆的中心到元素的顶部绘制一条垂直线(以及从顶部开始的五个像素)。在这一点上事情变得有点复杂，但仍然非常理解。
我们现在从我们当前的位置(115,5)绘制弧线：
A110,35 z
这创建了我们的弧，并给它一个与我们的圆(110)的半径匹配的半径。这两个值表示x半径和y半径，并且两者相等，因为我们处理一个圆。下一组重要的数字是最后一个，190,35。这告诉电弧在哪里完成。
对于其余的信息(1,1和z)，这些控制弧的自身的曲率，方向和终端。您可以通过咨询任何在线SVG路径参考来了解更多信息。
为了完成不同尺寸的“切片”，仅仅改变190,35以反映更大或更小的坐标集合。你可能会发现，如果你想跨越180度，你需要创建第二个弧。
如果要从某个角度确定x和y坐标，可以使用以下公式：
x = cx + r * cos(a) y = cy + r * sin(a)
对于上述示例，76的程度将是：
x = 115 + 110 * cos(76) y = 115 + 110 * sin(76)
这给了我们205.676,177.272。
有了一些简单，你可以创建以下：
