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

Question

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

1. 环形边框粗细必须是百分比数字，而不是 rm 或绝对像素数，这样环形才能根据容器大小完全响应；

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

3. 环的填充物必须是透明的，这样用户才能透过它看到背景。

这是一个简单的例子:

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

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

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

Answer 1

您可以考虑 mask 来实现这一目标其中的想法是使用 radial-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>