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

前端之家收集整理的这篇文章主要介绍了如何在CSS中绘制圆形扇区?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
好了,用纯CSS绘制圆是很容易的。
  1. .circle{
  2. width: 100px;
  3. height: 100px;
  4. border-radius: 100px;
  5. border: 3px solid black;
  6. background-color: green;
  7. }

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

例如:

谢谢示例

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

JSFiddle demo

  1. $(function drawSector(){
  2. // Get degrees
  3. ...
  4. // Draw a sector
  5. if (deg <= 180){
  6. activeBorder.css('background-image','linear-gradient(' + (90+deg) + 'deg,transparent 50%,#A2ECFB 50%),linear-gradient(90deg,#A2ECFB 50%,transparent 50%)');
  7. }
  8. else{
  9. activeBorder.css('background-image','linear-gradient(' + (deg-90) + 'deg,#39B4CC 50%),transparent 50%)');
  10. }
  11.  
  12. // Rotate to meet the start degree
  13. activeBorder.css('transform','rotate(' + startDeg + 'deg)');
  14. });

解决方法

CSS和多个背景渐变

而不是试图绘制绿色部分,你可以绘制白色部分:

  1. pie {
  2. border-radius: 50%;
  3. background-color: green;
  4. }
  5.  
  6. .ten {
  7. background-image:
  8. /* 10% = 126deg = 90 + ( 360 * .1 ) */
  9. linear-gradient(126deg,white 50%),white 50%,transparent 50%);
  10. }

演示:http://jsfiddle.net/jonathansampson/7PtEm/

可缩放矢量图形

如果它是一个选项,您可以使用SVG< circle>和< path>元素。考虑以下:

  1. <svg>
  2. <circle cx="115" cy="115" r="110"></circle>
  3. <path d="M115,115 L115,5 A110,110 1 0,1 190,35 z"></path>
  4. </svg>

以上是相当简单的。我们有一个包含一个圆和一个路径的元素。圆的中心位置为115×115(使SVG元素为230×230)。该圆的半径为110,使其总宽为220(留下边框为10)。

然后我们添加一个< path>元素,这是该示例的最复杂的部分。此元素具有一个属性,它确定路径的绘制位置和路径。它从以下值开始:

  1. M115,115

这指示路径在上述圆的中心开始。接下来,我们从这个位置绘制一条线到下一个位置:

  1. L115,5

这从圆的中心到元素的顶部绘制一条垂直线(以及从顶部开始的五个像素)。在这一点上事情变得有点复杂,但仍然非常理解。

我们现在从我们当前的位置(115,5)绘制弧线:

  1. A110,35 z

这创建了我们的弧,并给它一个与我们的圆(110)的半径匹配的半径。这两个值表示x半径和y半径,并且两者相等,因为我们处理一个圆。下一组重要的数字是最后一个,190,35。这告诉电弧在哪里完成。

对于其余的信息(1,1和z),这些控制弧的自身的曲率,方向和终端。您可以通过咨询任何在线SVG路径参考来了解更多信息。

为了完成不同尺寸的“切片”,仅仅改变190,35以反映更大或更小的坐标集合。你可能会发现,如果你想跨越180度,你需要创建第二个弧。

如果要从某个角度确定x和y坐标,可以使用以下公式:

  1. x = cx + r * cos(a)
  2. y = cy + r * sin(a)

对于上述示例,76的程度将是:

  1. x = 115 + 110 * cos(76)
  2. y = 115 + 110 * sin(76)

这给了我们205.676,177.272。

有了一些简单,你可以创建以下:

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

猜你在找的CSS相关文章