Question

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

环形边框的厚度必须是百分比数字，而不是rm或绝对像素数，这样环形形状才能根据容器大小完全响应；
环形边框需要有背景，对于我的情况，背景有时可能是3-4种纯色或渐变色的组合；
环的填充必须透明，以便用户可以通过环看到背景。

下面是一个简单的示例：

这是我使用过的一些尝试：

使border-radius: 50% div仅具有边框宽度，但很快我发现边框宽度不能是百分比数字；
SVG将圆形div裁剪为环形。到目前为止，我无法成功使其运行...如果这是正确的方法，请分享一些代码段。

Answer 1

为了保持百分比值，您可以尝试使用半径梯度。但是，边界看起来有些混乱。

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

您可以考虑使用mask-image来实现这一点，其中的想法是使用radial-gradient创建孔并使用固定值，这将使可见部分（厚度）具有响应性。

.box {
  border-radius:50%;
  background:linear-gradient(red,purple,orange);
  -webkit-mask-image: radial-gradient(transparent 89px,#000 90px);
  mask-image: 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 3

您可以使用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

Answer 4

在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剪辑路径，但这会变得非常复杂。

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

4 个答案: