- .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。
有了一些简单,你可以创建以下: