创建自定义饼图样式圆形

Question

我正在尝试从一个圆形中切出一个部分，但这比我最初预期的要困难...... 最好不要使用Google Charts和其他类似工具，因为我需要尽可能多地控制这个圆形的样式（最终结果是一个加载环）。我还需要能够使用jQuery或CSS来动画显示切片的大小。请原谅我，但我并没有做得很远，这就是我拥有的全部内容：JSFiddle。 我关心的圆圈是#layer_2和#layer_3。这里是仅涉及此圆形的代码：

#layer_2 {
  border-radius: 50%;
  width: 212px;
  height: 212px;
  margin: 14px;
  background: #5c00d2;
  background: -moz-linear-gradient(45deg, #5c00d2 0%, #d586f4 100%);
  background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, #5c00d2), color-stop(100%, #d586f4));
  background: -webkit-linear-gradient(45deg, #5c00d2 0%, #d586f4 100%);
  background: -o-linear-gradient(45deg, #5c00d2 0%, #d586f4 100%);
  background: -ms-linear-gradient(45deg, #5c00d2 0%, #d586f4 100%);
  background: linear-gradient(45deg, #5c00d2 0%, #d586f4 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#5c00d2', endColorstr='#d586f4', GradientType=1);
  -webkit-box-shadow: inset 0px 0px 5px 3px rgba(5, 71, 110, 0.5);
  -moz-box-shadow: inset 0px 0px 5px 3px rgba(5, 71, 110, 0.5);
  box-shadow: inset 0px 0px 5px 3px rgba(5, 71, 110, 0.5);
}
#layer_3 {
  border-radius: 50%;
  width: 212px;
  height: 212px;
  margin: 0;
  background: transparent;
  -webkit-box-shadow: inset 0px 0px 30px 0px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: inset 0px 0px 30px 0px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0px 0px 30px 0px rgba(0, 0, 0, 0.3);
}

<div id="layer_2">
  <div id="layer_3"></div>
</div>

我希望最终结果看起来与这个类似：

- Ben Carey

---

@Shomz 我想那可能是情况 :-(。Canvas和SVG是我没有经验的东西。它难吗？ - Ben Carey

@BenCarey；不，这并不难。这是相当基础的东西。虽然我不是专家，但在互联网上找到一些教程的帮助下，我能够编写六边形网格和饼图的代码。 - Mouser

好的，它们需要一些时间来学习，但并不难。然而，你可以尝试保留你已经拥有的许多东西 - 例如，整个圆可以设置为画布/ SVG 后面的元素，然后你只需通过将三角形状放在其上方来“切出”片段。 - Shomz

@Shomz 我可以使用canvas/svg进行动画吗？ - Ben Carey

没问题，祝你好运！ :) - Shomz

Answer 1

尝试这个

layer_2

background-image:
    linear-gradient(-90deg, transparent 50%, #5c00d2 50%),
    linear-gradient(200deg, #5c00d2 50%, transparent 50%);

DEMO

的英译为：

{{链接1：演示}}

。

- Arun Kumar

---

这很棒，但不幸的是我无法将其与渐变一起使用 :-( 为你的努力点赞。 - Ben Carey