主页 / 问题 / 821164
Accepted
Alexandr_TT
Asked:2020-04-30 00:46:33 +0000 UTC2020-04-30 00:46:33 +0000 UTC

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

  • 772

用纯 CSS 画一个圆很容易。

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

如何绘制扇区？给定一个角度X - [0-360]，我想画一个X度数的扇区。我可以用 pure 来做CSS吗？

例如：

在此处输入图像描述

JQuery如果它对某人有帮助，这里有一个获取百分比并绘制扇区 的函数示例。

$(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>

问题的意译如何在CSS中画一个圆扇形？通过 @Itay Gal。

html

5 个回答

  1. Best Answer

    具有厚边界和 的解stroke-dasharray。
    元素的svg笔画延伸到其实际边框的任一侧：

    .example{
  fill: yellow;
  stroke: green;
  stroke-opacity: .25;
  stroke-width: 20px;
}
    <svg width="100" height="100" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
  <circle class="example" r="40" cx="50" cy="50" />
</svg>

    这样你就可以只用一个笔划画一个圆。为此，您需要指定比所需的扇区半径小 2 倍的半径，以及相同的笔划粗细。并且已经可以通过stroke-dasharray 属性轻松调整可见边框的份额（视觉上 - 圆圈的扇区）：

    document.querySelector('input').addEventListener('input',function(){
  var sector = document.querySelector('.sector');
  
  //длина окружности по реальной границе. 
  var strokeLength = sector.getTotalLength();
  
  //Её можно рассчитать и через 2𝜋r
  //var strokeLength = 2*Math.PI*sector.getAttribute('r');
  
  var part = this.value, 
      result = strokeLength/100*part;
      
  sector.style.strokeDasharray = result + ',' + strokeLength;
})
    .border{
  fill: none;
  stroke: green;
  stroke-width: 1px;
}
.sector{
  fill: none;
  stroke: green;
  stroke-width: 50px;
}
label,
span{
  display: block;
}
    <svg width="100px" height="100px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
  <circle class="sector" r="25" cx="50" cy="50" />
  <circle class="border" r="49.5" cx="50" cy="50" />
</svg>
<label>
  <span>Значение (%)</span>
  <input type="number" min="0" max="100" value="0">
</label>

    锥形梯度css的现代解决方案： 

    document.querySelector('input').addEventListener('input',function(){
  var chart = document.querySelector('.pie-chart');      
  chart.style.setProperty('--value',this.value + '%');
})
    .pie-chart{
  width: 150px;
  height: 150px;
  border-radius: 50%;
  --value: 30%;
  background: conic-gradient(green var(--value), transparent 0);
}
label,
span{
  display: block;
}
    <div class="pie-chart"></div>
<label>
  <span>Значение (%)</span>
  <input type="number" min="0" max="100" value="30">
</label>

    • 20

  2. 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>

    可缩放矢量图形

    在这个变体中，您可以使用 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（5两边都有边界）。

    然后我们添加元素<path>，这是这个例子中最复杂的部分。该元素有一个属性，指定路径的绘制位置和方式。它从以下值开始：

    M115,115

    这指出了从上述圆的中心开始的方式。然后我们将从那个位置画一条线到另一个位置：

    L115,5

    这将绘制一条从圆心到元素顶部的垂直线（好吧，距离顶部五个像素）。正是在这一点上，事情变得有点复杂，但仍然很清楚。

    现在我们将从当前位置 (115.5) 绘制一条弧线：

    A110,110 1 0,1 190,35 z

    这将创建我们的圆弧并为其提供与我们的圆相匹配的半径 (110)。这两个值代表x-радиус和y-радиус，并且两者相等，因为我们正在处理一个圆。下一组重要数字是最后一个，190,35。这告诉弧在哪里停止。

    至于其余的信息(1 0,1 и z)，它们控制弧本身的曲率、方向和输出。您可以通过参考 Web 上的任何SVG 链接来了解有关它们的更多信息。

    要执行slice不同的大小，只需更改值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/

    答案免费翻译如何在 CSS 中画一个圆扇形？来自贡献者 @Sampson。

    • 18

  3. 带画布的变体

    function draw(){
  var canvas = document.getElementById('circle');
  var ctx = canvas.getContext('2d');
  ctx.beginPath();
  ctx.moveTo(125,125);
  ctx.lineTo(250,0);
  ctx.lineTo(250,120);
  ctx.fillStyle = 'green';
  ctx.fill();
}
draw();
    canvas {
  border: 1px solid green;
  border-radius: 50%;
}
    <canvas id="circle" width="250" height="250"></canvas>

    • 10 

  4. .circle {
  width: 100px;
  height: 100px;
  background: green;
  background-image: linear-gradient(-75deg, transparent 50%, #fff 0);
  border-radius: 100px;
  border: 3px solid black;
}

.circle::before {
  content: '';
  display: block;
  margin-left: 50%;
  height: 100%;
  border-radius: 0 100% 100% 0 / 50%;
  background: #fff;
  transform-origin: left;
  transform: rotate(70deg);
}
    <div class="circle"></div>

    更多信息：https ://www.smashingmagazine.com/2015/07/designing-simple-pie-charts-with-css/

    • 8

  5. CSS Variant，没有渐变，但带有矩形形式的伪元素：

    中心两个圆圈中的扇区出现在悬停时，对于后者也是可能的，但那里的动画会更复杂=）

    sector.a30:before {
  transform: rotate(-30deg);
}
sector.a60:hover:before {
  transform: rotate(-60deg);
}
sector.a160:hover:before {
  transform: rotate(-160deg);
}
sector.a220:after {
  transform: rotate(-220deg);
}

sector {
  display: inline-block;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: solid green;
  overflow: hidden;
  background-color: green;
}

sector:before {
  transform-origin: 50% 100%;
}

sector:after {
  transform-origin: 50% 0%;
}

sector:before, sector:after {
  transition:300ms;
  background-color: white;
  content: '';
  width: 100%;
  height: 50%;
  display: block;
}

sector.a220:before, sector.a220:after {
  background-color: green;
}
sector.a220 {
  background-color: white;
}
    <sector class="a30"></sector>
<sector class="a60"></sector>
<sector class="a160"></sector>
<sector class="a220"></sector>

    • 7

相关问题