如何在CSS中绘制圆形扇区？

好了，用纯CSS绘制圆是很容易的。

.circle{
    width: 100px;
    height: 100px;
    border-radius: 100px;
    border: 3px solid black;
    background-color: green;
}

如何画扇形？给定一个度数X [0-360]我想画一个X度扇区。
我可以用纯CSS吗？

例如：

谢谢示例

谢谢Jonathan，我使用第一种方法。如果它帮助某人在这里的一个例子的JQuery函数，获取百分比和绘制一个扇区。扇区在百分比圆圈后面，并且该示例示出了如何从开始度数实现围绕圆的弧。

JSFiddle demo

$(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)');
});

解决方法

CSS和多个背景渐变

而不是试图绘制绿色部分，你可以绘制白色部分：

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。

有了一些简单，你可以创建以下：

演示：http://jsfiddle.net/jonathansampson/tYaVW/

如何在CSS中绘制圆形扇区？

解决方法

相关文章