问题

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

回答1:

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>

回答2:

Not perfect solution for the updated question (CSS embeds forbidden SVG), and currently works in Firefox-based browsers only (afaik), but wanted to bring the CSS clip-path into discussion:

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>

回答3:

Use a unicode circle and set a gradient font color.

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

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

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

来源：https://stackoverflow.com/questions/33136863/creating-a-gradient-torus-in-html-css

标签

html

css

gradient

Creating a Gradient Torus in HTML/CSS [closed]

问题

回答1:

Update

回答2:

回答3: