如何在CSS中绘制圆扇区?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (308)

嗯,用纯CSS画一个圆圈很容易。

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

如何绘制扇区?给定X度0-360我想画一个X度扇区。我能用纯CSS做这个吗?

例如:

答案:

$(function drawSector() {
  var activeBorder = $("#activeBorder");
  var prec = activeBorder.children().children().text();
  if (prec > 100)
    prec = 100;
  var deg = prec * 3.6;
  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, transparent 50%, #39B4CC 50%),linear-gradient(90deg, #A2ECFB 50%, transparent 50%)');
  }

  var startDeg = $("#startDeg").attr("class");
  activeBorder.css('transform', 'rotate(' + startDeg + 'deg)');
  $("#circle").css('transform', 'rotate(' + (-startDeg) + 'deg)');
});
.container {
  width: 110px;
  height: 110px;
  margin: 100px auto;
}

.prec {
  top: 30px;
  position: relative;
  font-size: 30px;
}

.prec:after {
  content: '%';
}

.circle {
  position: relative;
  top: 5px;
  left: 5px;
  text-align: center;
  width: 100px;
  height: 100px;
  border-radius: 100%;
  background-color: #E6F4F7;
}

.active-border {
  position: relative;
  text-align: center;
  width: 110px;
  height: 110px;
  border-radius: 100%;
  background-color: #39B4CC;
  background-image: linear-gradient(91deg, transparent 50%, #A2ECFB 50%), linear-gradient(90deg, #A2ECFB 50%, transparent 50%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

<div class="container">
  <div id="activeBorder" class="active-border">
    <div id="circle" class="circle">
      <span class="prec">66</span>
      <span id="startDeg" class="90"></span>
    </div>
  </div>
</div>

$(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, transparent 50%, #39B4CC 50%), linear-gradient(90deg, #A2ECFB 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, transparent 50%, white 50%),
        linear-gradient(90deg, white 50%, transparent 50%);
}

pie {
  width: 5em;
  height: 5em;
  display: block;
  border-radius: 50%;
  background-color: green;
  border: 2px solid green;
  float: left;
  margin: 1em;
}

.ten {
  background-image: linear-gradient(126deg, transparent 50%, white 50%), linear-gradient(90deg, white 50%, transparent 50%);
}

.twentyfive {
  background-image: linear-gradient(180deg, transparent 50%, white 50%), linear-gradient(90deg, white 50%, transparent 50%);
}

.fifty {
  background-image: linear-gradient(90deg, white 50%, transparent 50%);
}


/* Slices greater than 50% require first gradient
   to be transparent -> green */

.seventyfive {
  background-image: linear-gradient(180deg, transparent 50%, green 50%), linear-gradient(90deg, white 50%, transparent 50%);
}

.onehundred {
  background-image: none;
}
<pie class="ten"></pie>
<pie class="twentyfive"></pie>
<pie class="fifty"></pie>
<pie class="seventyfive"></pie>
<pie class="onehundred"></pie>

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

可伸缩矢量图形

如果它是一个选项,您可以使用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>

上面的内容是相当直接的。我们有一个元素,包含一个圆和一个路径。圆周的中心在115x115(使SVG元素230x230)。圆圈半径为110,总共宽220圈(留下10条边界)。

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

M115,115

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

L115,5

这画了一条垂直线从圆心到元素的顶部(从顶部的五个像素)。在这一点上,事情变得更加复杂,但仍然非常容易理解。

我们现在从我们目前的地点(115,5)划出一条弧线:

A110,110 1 0,1 190,35 z

这创造了我们的弧,并给它一个半径,与我们的圆(110)的半径相匹配。这两个值代表x-半径和y-半径,两者是相等的,因为我们处理的是一个圆。下一组重要数字是最后一组,190,35...。这说明了弧线的完成位置。

至于其余的资料(1 0,1z)这些控制弧本身的曲率、方向和末端。您可以通过咨询任何在线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天龙八部

可以轻松地创建以下内容:

circle {
  fill: #f1f1f1;
  stroke: green;
  stroke-width: 5;
}

path {
  fill: green;
}

svg.pie {
  width: 230px;
  height: 230px;
}
<svg class="pie">
  <circle cx="115" cy="115" r="110"></circle>
  <path d="M115,115 L115,5 A110,110 1 0,1 190,35 z"></path>
</svg>

<svg class="pie">
  <circle cx="115" cy="115" r="110"></circle>
  <path d="M115,115 L115,5 A110,110 1 0,1 225,115 z"></path>
</svg>

<svg class="pie">
  <circle cx="115" cy="115" r="110"></circle>
  <path d="M115,115 L115,5 A110,110 1 0,1 115,225 A110,110 1 0,1 35,190 z"></path>
</svg>

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

用户回答回答于

这是非常可能的使用overflowtransform属性,而不需要进行复杂的计算。

>旋转变换

角度小于180度

  1. 添加一个元素宽径比02:1overflow: hidden;
  2. 添加一个伪元素,其顶部边框半径与元素的高度相同,底部半径为0。
  3. transform-origin: 50% 100%;这将从其中间底部转换伪元素。
  4. 变换:旋转();通过补充所需角度的伪元素,内---...transform: rotate(180 - rqrd. angle);

看看它是如何工作的:

扫码关注云+社区

领取腾讯云代金券