title: CSS ring with background and percentage border width
body: <p>I'm seeking for some advice on creating a "ring" shape in CSS. Here's some important detailed goals I need to achieve: </p>
  
  <ol>
  <li><p>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;</p></li>
  <li><p>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;</p></li>
  <li><p>The filling of the ring must be transparent so user can see the background through it. </p></li>
  </ol>
  
  <p>Here's a quick example: <a href="https://i.stack.imgur.com/GBucf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GBucf.png" alt="enter image description here"></a></p>
  
  <p>Here are a few attempts I used:</p>
  
  <ol>
  <li><p>Make a <code>border-radius: 50%</code> div with only border width but soon I noticed the border width cannot be a percentage number;</p></li>
  <li><p>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.</p></li>
  </ol>