我如何使用圆形或圆锥形采用梯度CSS？

Question

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

我在想，我怎么能重现此梯度由紫色变为粉红色围绕这个圈子？

任何帮助非常感谢！我尝试不同的事情，似乎没有任何工作打算，渐变背景把事情搞乱，边界有关的时尚也没有工作非常出色，我真的不知道该怎么再尝试了。有任何想法吗？

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

HTML和CSS：

#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";
}

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

Answer 1

Update: Chrome >68 now supports this!

This was actually being implemented as conic-gradient.

这是使用Chrome Canary（NOV 2017）用实验性的功能标志设置为“已启用”，但这部作品在普通版本以及if you enable it.

基本例如：

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

<div></div>

需要注意的是上面的例子并不大多数浏览器上运行，但在矿山，并希望，未来，它会显示这样的：

现在，如果我们建立我们自己的小部件装

.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);
}

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

现在我知道你们中的大多数还看不出来，但是这是它的外观与标志：

现在编辑的水平，只需调整transform: rotate(deg)属性，你就必须兼顾角落找寻与左半覆盖不需要的部分，但剪辑路径可以在这里是一个很好的解决方案。

现在当然这一切都是美妙的，但仍然非常没有在当前的浏览器可用，利·贝罗创造了这虽然，more information about that can be found here一个梦幻般的填充工具

Answer 2

我刚才提出使用2个线性梯度作为背景，然后用圆形冲程掩蔽他们一个小提琴和与jQuery动画它：

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);
});

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