按百分比填充圆形边框

Question

我尝试了几个指南来创建一个根据百分比填充的圆形，但似乎无法实现（没有动画，只有静态CSS圆形）。

圆形边框目前遵循 background-image: linear-gradient，我首先将其设置为 (90+(360*0.percent))deg，第二个设置为 90deg。在前50%时它工作得很好，但超过这个范围后它就无法正确填充。

.circle {
  position: relative;
  top: 5px;
  left: 5px;
  text-align: center;
  width: 100px;
  height: 100px;
  border-radius: 100%;
  background-color: #ffffff;
}

.circle-border {
  position: relative;
  text-align: center;
  width: 110px;
  height: 110px;
  margin-left: 30%;
  border-radius: 100%;
  background-color: #E53B3B;
  background-image: linear-gradient(162deg, transparent 50%, #f0f0f0 50%), linear-gradient(90deg, #f0f0f0 50%, transparent 50%);
}

<div class="circle-border">
  <div class="circle">
  </div>
</div>

当我想要填充超过50％的圆时，应更改linear-gradient的哪些值？

- Guy Ariely

---

请查看此链接：https://dev59.com/Fq7la4cB1Zd3GeqPZDQ4#52205730，在所有情况下都几乎相同。 - Temani Afif

这是一个非常不错的纯CSS3解决方案，还配备了源代码。链接为：http://circle.firchow.net/，其中压缩包下载链接为：http://circle.firchow.net/css-circle.zip。 - Laurens Deprost

Answer 1

对于第一个线性部分，您可以使用linear-gradient:(270deg,...)来填充圆的50%。

对于其他线性部分，您可以增加角度（270°+）以填充超过圆的50%（360°或0°=圆的75%... 90°=圆的100%）

例如：linear-gradient(270deg, black 50%, transparent 50%), linear-gradient(0deg, black 50%, lightgray 50%)组合创建了一个背景为浅灰色、填充了75%黑色的圆。（下面是片段）

.circle {
  position: relative;
  top: 5px;
  left: 5px;
  text-align: center;
  width: 100px;
  height: 100px;
  border-radius: 100%;
  background-color: #ffffff;
}

.circle-border {
  position: relative;
  text-align: center;
  width: 110px;
  height: 110px;
  margin-left: 30%;
  border-radius: 100%;
  background-color: #E53B3B;
  background: linear-gradient(270deg, black 50%, transparent 50%), linear-gradient(0deg, black 50%, lightgray 50%)
}

<div class="circle-border">
  <div class="circle">
  </div>
</div>

- Mordecai

---

谢谢，这正是所需的。 - Guy Ariely

Answer 2

.circle {
  position: relative;
  top: 5px;
  left: 5px;
  text-align: center;
  width: 100px;
  height: 100px;
  border-radius: 100%;
  background-color: #ffffff;
}

.circle-border {
  position: relative;
  text-align: center;
  width: 110px;
  height: 110px;
  margin-left: 30%;
  border-radius: 100%;
  background-color: #E53B3B;
  background-image: linear-gradient(162deg, transparent 100%, #f0f0f0 100%), linear-gradient(90deg, #f0f0f0 -100%, transparent 0%);
}

<div class="circle-border">
  <div class="circle">
  </div>
</div>

只需要玩弄数字。

- Jay

---

准确是哪个数字？ - Temani Afif

比较 OP 的 CSS 和我的。 - Jay