如何使用CSS使用圆形或圆锥形渐变？

Question

首先，这是我尝试使用CSS重现的内容：

我在想，我怎么能再现这个圈子里从紫色到粉红色的渐变？

非常感谢任何帮助！我尝试了不同的东西，没有任何东西似乎按预期工作，渐变背景搞砸了，边框相关的时尚也很有效，我真的不知道该怎么办了。有什么想法吗？

到目前为止，这是我的代码：

HTML＆amp; CSS：

＆＃13;

＆＃13;

#DIV_1,
#DIV_2 {
  bottom: 0px;
  float: left;
  height: 120px;
  left: 0px;
  position: relative;
  right: 0px;
  top: 0px;
  width: 120px;
  perspective-origin: 60px 60px;
  transform-origin: 60px 60px;
  background: rgb(204, 204, 204) none repeat scroll 0% 0% / auto padding-box border-box;
  border-radius: 50% 50% 50% 50%;
  font: normal normal 400 normal 120px / normal "Times New Roman";
  margin: 0px 12px 12px 0px;
}

#DIV_1:after,
#DIV_2:after {
  bottom: 9.60938px;
  content: ' ';
  display: block;
  height: 100.797px;
  left: 9.6px;
  position: absolute;
  right: 9.60938px;
  top: 9.6px;
  width: 100.797px;
  perspective-origin: 50.3906px 50.3906px;
  transform-origin: 50.3906px 50.3906px;
  background: rgb(245, 245, 245) none repeat scroll 0% 0% / auto padding-box border-box;
  border-radius: 50% 50% 50% 50%;
  font: normal normal 400 normal 120px / normal "Times New Roman";
  transition: all 0.2s ease-in 0s;
}

#SPAN_3 {
  bottom: 0px;
  color: rgb(204, 204, 204);
  display: block;
  height: 120px;
  left: 0px;
  position: absolute;
  right: 0px;
  text-align: center;
  text-decoration: none solid rgb(204, 204, 204);
  top: 0px;
  white-space: nowrap;
  width: 120px;
  z-index: 1;
  column-rule-color: rgb(204, 204, 204);
  perspective-origin: 60px 60px;
  transform-origin: 60px 60px;
  caret-color: rgb(204, 204, 204);
  border: 0px none rgb(204, 204, 204);
  font: normal normal 400 normal 24px / 120px "Times New Roman";
  outline: rgb(204, 204, 204) none 0px;
  transition: all 0.2s ease-out 0s;
}

#DIV_4 {
  bottom: 0px;
  clip: rect(0px 120px 120px 60px);
  height: 120px;
  left: 0px;
  position: absolute;
  right: 0px;
  top: 0px;
  width: 120px;
  perspective-origin: 60px 60px;
  transform-origin: 60px 60px;
  font: normal normal 400 normal 120px / normal "Times New Roman";
}

#DIV_5 {
  bottom: 0.015625px;
  clip: rect(0px 60px 120px 0px);
  height: 100.797px;
  left: 0px;
  position: absolute;
  right: 0.015625px;
  top: 0px;
  width: 100.797px;
  perspective-origin: 59.9844px 59.9844px;
  transform: matrix(-0.587785, 0.809017, -0.809017, -0.587785, 0, 0);
  transform-origin: 59.9844px 59.9844px;
  border: 9.59375px solid rgb(77, 181, 60);
  border-radius: 50% 50% 50% 50%;
  font: normal normal 400 normal 120px / normal "Times New Roman";
}

#DIV_6 {
  width: 120px;
  perspective-origin: 60px 0px;
  transform-origin: 60px 0px;
  border: 0px none rgb(77, 181, 60);
  font: normal normal 400 normal 120px / normal "Times New Roman";
}

＆＃13;

<div id="DIV_1">
  <div id="DIV_2">
    <span id="SPAN_3">35%</span>
    <div id="DIV_4">
      <div id="DIV_5">
      </div>
      <div id="DIV_6">
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

更新：Chrome＆gt; 68现在支持此功能！

这实际上是以conic-gradient实现的。

这是使用Chrome Canary（2017年11月），实验功能标记设置为＆＃39;已启用＆＃39;，但这也适用于常规版本if you enable it.

基本示例：

＆＃13;

＆＃13;

div {
  width: 100px;
  height: 100px;
  background: conic-gradient(#F00, #0F0);
}

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;

请注意，上面的示例并不适用于大多数浏览器，但在我的希望未来，它会显示：

现在，如果我们构建自己的小型加载小部件

＆＃13;

＆＃13;

.wrapper {
  background-color: #EEE;
  width: 100px;
  height: 100px;
  padding: 50px;
}

.bg {
  position: relative;
  background: conic-gradient(#f00, #0f0);
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100%;
}

.radial-overlay {
  background-color: #EEE;
  position: absolute;
  top: 10px;
  left: 10px;
  width: 80px;
  height: 80px;
  border-radius: 100%;
}

.left-half {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: #EEE;
  clip-path: inset(0px 50px 50px 0px);
}

.right-half {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: #EEE;
  clip-path: inset(50px 50px 0px 00px);
  transform: rotate(30deg);
}

＆＃13;

<div class="wrapper">
  <div class="bg">
    <div class="radial-overlay"></div>
    <div class="right-half"></div>
    <div class="left-half"></div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

现在我知道你们中的大多数人都看不到它，但这就是带有标志的方式：

现在要编辑关卡，只需调整transform: rotate(deg)属性，你就必须用左半边的方法来处理不需要的部分，但剪切路径在这里可能是一个很好的解决方案。

现在当然这很棒，但在目前的浏览器中仍然无法使用，Lea Verou为此创造了一个梦幻般的polyfill，more information about that can be found here

Answer 2

我只是使用2个线性渐变作为背景制作了一个小提琴，然后使用圆形笔划对其进行遮罩，并使用JQuery对其进行动画处理：

＆＃13;

＆＃13;

var circle = $('#myMask circle');
var total = 2*Math.PI*circle.attr('r');
circle.attr('stroke-dasharray',total);
circle.attr('stroke-dashoffset',total);

$('button').click(function() {
  var p = $('#percentage').val() || 0;
  p = Math.max(0,Math.min(100,p))/100;
  $('#percentage-text').text(p*100+'%');
  circle.animate({'stroke-dashoffset': total-total*p}, 1000);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg viewBox="0 0 100 100" width="100" height="100">
  <defs>
    <linearGradient id="grad1" x1="0" y1="50%" x2="0" y2="100%">
      <stop offset="0%" stop-color="blue" />
      <stop offset="100%" stop-color="purple" />
    </linearGradient>
    <linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="red" />
      <stop offset="100%" stop-color="purple" />
    </linearGradient>
    <mask id="myMask">
      <circle cx="50" cy="50" r="45" stroke-width="10" stroke="white" fill="transparent" transform="rotate(-90,50,50)"/>
    </mask>
  </defs>
  <circle cx="50" cy="50" r="45" stroke-width="10" stroke="grey" fill="transparent" stroke-opacity=".2" />
  <rect x="49.5" y="0" width="52" height="100" fill="url(#grad1)" mask="url(#myMask)"/>
  <rect x="0" y="0" width="49.5" height="100" fill="url(#grad2)" mask="url(#myMask)"/>
  <text id="percentage-text" x="50" y="55" text-anchor="middle">0%</text>
</svg>
<input id="percentage" type="text">
<button>Click me!</button>

＆＃13;

＆＃13;

＆＃13;