如何使用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

更新:Chrome> 68现在支持此功能!

这实际上是作为conic-gradient.

这是使用Chrome Canary(2017年11月),实验功能标记设置为"启用",但如果启用它,这也适用于常规版本.

基本示例:

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)属性,你就必须用左半边的胡扯来覆盖不需要的部分,但剪切路径在这里可以是一个很好的解决方案.

现在当然这很棒,但在目前的浏览器中仍然无法使用,Lea Verou为此创建了一个梦幻般的polyfill,有关它的更多信息可以在这里找到