CSS Gradient围绕着一点

Question

我想知道是否有人知道,是否可以使用CSS创建这样的渐变？我知道它可以使用画布完成但是没有可能吗？

Answer 1

这是我能够在不熬夜的情况下尽可能接近,但是,是的,这是可能的! [但是,只有诡计,抱歉; 我不知道有任何方法可以创建像这样的合法CSS3渐变环,但至少,这是纯HTML/CSS!]

的jsfiddle

CSS

[我为它凌乱而道歉]

.tophalf {
position:absolute;
width: 250px; height:125px;
-webkit-border-top-left-radius: 193px;
-webkit-border-top-right-radius: 193px;
-moz-border-radius-topleft: 193px;
-moz-border-radius-topright: 193px;
border-top-left-radius: 193px;
border-top-right-radius: 193px;

background: -moz-linear-gradient(left, #db9771 1%, #cc5f7f 51%, #c30380 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(1%,#db9771), color-stop(51%,#cc5f7f), color-stop(100%,#c30380));
background: -webkit-linear-gradient(left, #db9771 1%,#cc5f7f 51%,#c30380 100%);
background: -o-linear-gradient(left, #db9771 1%,#cc5f7f 51%,#c30380 100%);
background: -ms-linear-gradient(left, #db9771 1%,#cc5f7f 51%,#c30380 100%);
background: linear-gradient(to right, #db9771 1%,#cc5f7f 51%,#c30380 100%);
}

.inner {
 position: relative; z-index: 1;
 top: 20px; left: 20px;
 width: 210px; height: 210px;
 background-color: white;
 border-radius: 100%;
}

.bottomhalf {
position:absolute;
top:133px;
width: 250px; height:125px;
-webkit-border-bottom-right-radius: 193px;
-webkit-border-bottom-left-radius: 193px;
-moz-border-radius-bottomright: 193px;
-moz-border-radius-bottomleft: 193px;
border-bottom-right-radius: 193px;
border-bottom-left-radius: 193px;

background: -moz-linear-gradient(left, #db9771 1%, #edc552 51%, #ffec00 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(1%,#db9771), color-stop(51%,#edc552), color-stop(100%,#ffec00));
background: -webkit-linear-gradient(left, #db9771 1%,#edc552 51%,#ffec00 100%);
background: -o-linear-gradient(left, #db9771 1%,#edc552 51%,#ffec00 100%);
background: -ms-linear-gradient(left, #db9771 1%,#edc552 51%,#ffec00 100%);
background: linear-gradient(to right, #db9771 1%,#edc552 51%,#ffec00 100%);
}

HTML

<div class='container'>
   <div class='tophalf'></div>
   <div class='inner'></div>
   <div class='bottomhalf'></div>
</div>

我怎么做的？

简单而简单,我将两个半圆放在一起,给每个半个不同的渐变,但保持左侧的起始颜色相同,确保"接缝"只在一侧.

然后,我把一个白色的大圈就在两个半圈的中心,躲在中间的一切,并成功创建渐变环.

来源？

编辑:哎呀!没有Gradient Editor,我无法做到.