在HTML / CSS中创建渐变圆环 [英] Creating a Gradient Torus in HTML/CSS
问题描述
CSS / HTML 中重新创建以下图片？ 就我所知，无论是径向渐变还是边界图像都无法构造这种形状。关键是圆的中心需要是透明的，因为我不能通过用白色填充中心来伪造圆环。
仅使用CSS，我相信你是有限的（如果你不想在CSS中使用任何SVG）。
一个解决方案不可扩展的解决方案就是像这样通过PNG创建一个简单的掩码。
透明部分是将从元素的边界框中移除的区域。
可以通过 border-radius：50％轻松创建外部圆。
body {background-color：＃d5d5d5;}。torus {width：312px; height：312px; / *创建外圈* / border-radius：50％; / *掩盖内圈* / -webkit-mask：url（http://i.imgur.com/pFLUTns.png）no-repeat; mask：url（http://i.imgur.com/pFLUTns.png）no-repeat; / *渐变背景* /背景：＃00601b;背景：-moz-linear-gradient（top，＃00601b 0％，＃e10019 100％）;背景：-webkit-gradient（线性，左上方，左下方，颜色停止（0％，＃00601b），停止颜色（100％，＃e10019））;背景：-webkit-linear-gradient（top，＃00601b 0％，＃e10019 100％）;背景：-o-linear-gradient（top，＃00601b 0％，＃e10019 100％）;背景：-ms-linear-gradient（top，＃00601b 0％，＃e10019 100％）;背景：线性梯度（至底部，＃00601b 0％，＃e10019 100％）; filter：progid：DXImageTransform.Microsoft.gradient（startColorstr ='＃00601b'，endColorstr ='＃e10019'，GradientType = 0）;}
< div class =torus>< / div> radial-gradient（）来创建一个新的元素， 来动态创建我原先用PNG手动完成的剪辑路径。目前仅支持webkit。
除了浏览器支持，唯一稍微不满意的结果是内圈上没有混叠。您可以将这些值混淆在一起，最后创建一个±1％的内插值，但我个人认为硬切断看起来更好。但是，嘿，它是超级直接的，并且尊重容器的缩放比例！
body {background-color：＃d5d5d5;}。torus {width：312px; height：312px; / *创建外圈* / border-radius：50％; / *使用径向渐变创建内部圆形蒙版* / / *调整所需渐变半径的60％* / -webkit-mask：径向渐变（椭圆在中心，rgba（0,0,0,0） ）0％，rgba（0,0,0,0）60％，rgba（0,0,0,1）60％，rgba（0,0,0,1）100％）; mask：径向渐变（椭圆在中心，rgba（0,0,0,0）0％，rgba（0,0,0,0）60％，rgba（0,0,0,1）60％，rgba （0,0,0,1）100％）/ *渐变背景* /背景：＃00601b;背景：-moz-linear-gradient（top，＃00601b 0％，＃e10019 100％）;背景：-webkit-gradient（线性，左上方，左下方，颜色停止（0％，＃00601b），停止颜色（100％，＃e10019））;背景：-webkit-linear-gradient（top，＃00601b 0％，＃e10019 100％）;背景：-o-linear-gradient（top，＃00601b 0％，＃e10019 100％）;背景：-ms-linear-gradient（top，＃00601b 0％，＃e10019 100％）;背景：线性梯度（至底部，＃00601b 0％，＃e10019 100％）; filter：progid：DXImageTransform.Microsoft.gradient（startColorstr ='＃00601b'，endColorstr ='＃e10019'，GradientType = 0）;}
< div class =torus>< / div>
Simply put, I need to put a gradient on a dynamically sized circle with a transparent background. Is there a way to recreate the following image in CSS/HTML?
As far as I can tell, neither radial gradients nor border-images are able to construct this shape. The key is that the center of the circle needs to be transparent, as I can not "fake" a torus by filling the center with white.
Update: This effect is fairly easily achievable in SVG, but I would like to know of an HTML/CSS only way to achieve it. See this example: http://codepen.io/MaxXiong/pen/rOGzgR
Using only CSS, I believe you're limited (if you don't want to use any SVG in the CSS).
A possible solution that's not scalable in terms of resolution is to create a simple mask via a PNG like so.
The transparent part is the area that will be removed from the bounding box of an element.
The outer circle can be created trivially via border-radius: 50%.
body {
background-color: #d5d5d5;
}
.torus {
width: 312px;
height: 312px;
/* creates outer circle */
border-radius: 50%;
/* masks the inner circle */
-webkit-mask: url(http://i.imgur.com/pFLUTns.png) no-repeat;
mask: url(http://i.imgur.com/pFLUTns.png) no-repeat;
/* gradient background */
background: #00601b;
background: -moz-linear-gradient(top, #00601b 0%, #e10019 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00601b), color-stop(100%,#e10019));
background: -webkit-linear-gradient(top, #00601b 0%,#e10019 100%);
background: -o-linear-gradient(top, #00601b 0%,#e10019 100%);
background: -ms-linear-gradient(top, #00601b 0%,#e10019 100%);
background: linear-gradient(to bottom, #00601b 0%,#e10019 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00601b', endColorstr='#e10019',GradientType=0 );
}
<div class="torus"></div>
Update
You can use radial-gradient( ) to dynamically create the clip path that I had originally done manually with a PNG. This is currently supported by webkit only.
Other than browser support, the only slightly dissatisfying result is the lack of aliasing on the inner circle. You can mess with the values to create a slight +-1% interpolation at the end, but I personally think the hard cutoff looks better. But hey, it's super straight forward and respects scale of the container!
body {
background-color: #d5d5d5;
}
.torus {
width: 312px;
height: 312px;
/* create the outer circle */
border-radius: 50%;
/* use a radial gradient to create the inner circle mask */
/* tweak 60% for the desired radius of the gradient */
-webkit-mask: radial-gradient(ellipse at center,
rgba(0,0,0,0) 0%, rgba(0,0,0,0) 60%,
rgba(0,0,0,1) 60%, rgba(0,0,0,1) 100%
);
mask: radial-gradient(ellipse at center,
rgba(0,0,0,0) 0%, rgba(0,0,0,0) 60%,
rgba(0,0,0,1) 60%, rgba(0,0,0,1) 100%
)
/* gradient background */
background: #00601b;
background: -moz-linear-gradient(top, #00601b 0%, #e10019 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00601b), color-stop(100%,#e10019));
background: -webkit-linear-gradient(top, #00601b 0%,#e10019 100%);
background: -o-linear-gradient(top, #00601b 0%,#e10019 100%);
background: -ms-linear-gradient(top, #00601b 0%,#e10019 100%);
background: linear-gradient(to bottom, #00601b 0%,#e10019 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00601b', endColorstr='#e10019',GradientType=0 );
}
<div class="torus"></div>
这篇关于在HTML / CSS中创建渐变圆环的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
