具有背景和百分比边框宽度的 CSS 环

Question

我正在寻求一些关于在 CSS 中创建“环形”形状的建议。以下是我需要实现的一些重要的详细目标：

1. 环形边框厚度必须是百分比数字，而不是 rm 或绝对像素数，以便环形形状可以根据容器大小完全响应；

2. 环形边框需要有背景，对于我的场景，背景有时可以是3-4种纯色的组合，或者是渐变色；

3. 环的填充物必须是透明的，以便用户可以透过它看到背景。

这是一个简单的例子：

以下是我使用的一些尝试：

1. 制作一个border-radius: 50%只有边框宽度的 div，但很快我注意到边框宽度不能是百分比数字；

2. SVG 将圆形 div 裁剪为环形。到目前为止，我无法成功地使其工作...如果这是正确的方法，请分享一些片段。

Answer 1

您可以考虑mask使用 aradial-gradient创建孔并使用固定值来实现此目的，这将使可见部分（厚度）具有响应能力。

.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

您可以使用vworvh作为度量。将border-width根据您选择的视口宽度或高度来计算。您必须计算要使用的值：

.ring {
  border: 10vw solid red;
  border-radius: 50%;
  height: 100%;
  position: absolute;
  width: 100%;
}

https://codepen.io/anon/pen/ErJbxN?editors=1100

使用 JS： https: //codepen.io/anon/pen/rPbYvm