在HTML / CSS中创建渐变环面

Question

简单地说，我需要在具有透明背景的动态大小的圆上放置渐变。有没有办法在CSS/HTML中重新创建以下图像？

据我所知，径向渐变和边界图像都无法构造这种形状。关键是圆圈的中心需要透明，因为我不能通过用白色填充中心来“伪造”圆环。

更新：在SVG中很容易实现此效果，但我想知道HTML / CSS实现它的唯一方法。请参阅此示例：http://codepen.io/MaxXiong/pen/rOGzgR

Answer 1

仅使用CSS，我相信您受到限制（如果您不想在CSS中使用任何SVG）。

在分辨率方面不可扩展的可能解决方案是通过PNG创建一个简单的掩码。

透明部分是将从元素的边界框中移除的区域。

可以通过border-radius: 50%轻松创建外圈。

＆＃13;

＆＃13;

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

＆＃13;

<div class="torus"></div>

＆＃13;

＆＃13;

＆＃13;

更新

您可以使用radial-gradient( )动态创建我最初使用PNG手动完成的剪辑路径。目前仅由webkit支持。

除了浏览器支持之外，唯一稍微不满意的结果是内圈上没有别名。你可以搞乱这些值来在最后创建一个轻微的+ -1％插值，但我个人认为硬截止看起来更好。但是，嘿，它非常直接并且尊重容器的规模！

＆＃13;

＆＃13;

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

＆＃13;

<div class="torus"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

不是更新问题的完美解决方案（CSS嵌入禁止的SVG），目前仅适用于基于Firefox的浏览器（afaik），但希望将CSS clip-path纳入讨论：

div {
  height:100px;
  width:100px;
  background-image: linear-gradient(to bottom, #393, #933 );
  clip-path: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><defs><clipPath id="a"><path d="M 50 10 A 25 25 0 0 0 50 90 A 25 25 0 0 0 50 10 M 50 0 A 50 50 0 0 1 50 100 A 50 50 0 0 1 50 0" /></clipPath></defs></svg>#a');
}

body {
  background-image: linear-gradient(to right, #333, #666, #333);
  background-size: 33px 10px;
}

<div>

Answer 3

使用unicode圆圈并设置渐变字体颜色。

http://jsfiddle.net/agvbqvmn/1/

＆＃13;

＆＃13;

.bg {
    width: 200px;
    height: 200px;
    background-color: #eee;
}
.torus:after {
    content: '\020dd';
    display: block;
    font-size: 72px;
    line-height: 102px;
    background: linear-gradient(to bottom, #00601b 0%,#e10019 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

＆＃13;

<div class="bg">
  <div class="torus"></div>
</div>

＆＃13;

＆＃13;

＆＃13;