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

Question

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

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

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

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

这是一个简单的例子：

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

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

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

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>

Answer 2

在 CSS 中制作响应式环很困难。我发现的最好的方法是简单地创建两个堆叠在一起的圆圈，其中顶部圆圈的背景与容器背景相同。您可以使用我的示例中的 2x 元素或伪类来执行此操作。

优点：

• 您有很多控制权
• 由于内容被“屏蔽”，因此可以轻松添加其他内容（如饼图）

缺点：

• 背景必须是纯色，并且不会通过圆环显示任何内容

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

如果您必须通过圆环查看背景，我会查看 SVG 剪辑路径，但这很快就会变得非常复杂。

Answer 3

为了保持百分比值，您可以尝试使用径向渐变。然而，边界往往看起来有点波涛汹涌。

.circle {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: sans-serif;
  color: #fff;
  height: 100%;
  width: 100%;
  border-radius: 50%;
  background: radial-gradient(ellipse at     center, 
    rgba(255,113,12,0) 60%,
    rgba(255,113,12,1) 51.5%);
}

示例：https://codepen.io/SROwl/pen/BMEJzj

Answer 4

您可以使用vw 或vh 作为指标。 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