CSS ring with background and percentage border width

Question

I'm seeking for some advice on creating a "ring" shape in CSS. Here's some important detailed goals I need to achieve:

1. the ring border thickness must be a percentage number, not rm or absolute pixel number, so that the ring shape can be fully responsive based on container size;

2. The ring border need to have a background, for my scenario, the background could be sometimes a combination of 3-4 solid colors, or a gradient color;

3. The filling of the ring must be transparent so user can see the background through it.

Here's a quick example:

Here are a few attempts I used:

1. Make a border-radius: 50% div with only border width but soon I noticed the border width cannot be a percentage number;

2. SVG clipping a round div to a ring shape. so far I was not able to successfully make it working... If this is the right approach, please share some snippet.

Answer 1

You can achieve this considering mask where the idea is to use a radial-gradient to create the hole and use fixed value which will make the visible part (the thickness) to be responsive.

.box {
  border-radius:50%;
  background:linear-gradient(red,purple,orange);
  -webkit-mask: radial-gradient(transparent 89px,#000 90px);
          mask: radial-gradient(transparent 89px,#000 90px);

}
.box:before {
  content:"";
  display:block;
  padding-top:100%;
}

.container {
  margin:0 auto;
  max-width:200px;
  animation:change 3s linear alternate infinite;
}

@keyframes change{
  to {
    max-width:400px;
  }
}

body {
 background:linear-gradient(to right,yellow,pink);
}

<div class="container">
<div class="box">

</div>
</div>

Answer 2

Making responsive rings in CSS is tough. The best I've found is to simply create two circles stacked on top of each other where the top circle's background is the same as the container background. You could do this with 2x elements like in my example or with a pseudo-class.

Pros:

• You get lots of control
• Easily add other content (like pie charts) since the content is "masked"

Cons:

• Background needs to be a flat color and nothing will show through the ring

.outer {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  position: relative;
  background-color: #9273B0;
  margin: 10px;
  cursor:pointer;
}

.inner {
  position: absolute;
  width: 50%;
  height: 50%;
  border-radius: 50%;
  background-color: #ffffff;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.5s ease-out;
}

.outer:hover .inner {
  width: 90%;
  height: 90%;
}

<div class="outer">
  <div class="inner"></div>
</div>

If you MUST see the background through the ring, I'd look into a SVG clip path but that gets really complicated pretty quick.