用百分比填充圆形边框 [英] Filling a circle border by percent

问题描述

我尝试实施一些指南来创建根据百分比填充的圆，但是我似乎无法使其正常工作(没有动画，只有一个静态CSS圆).

I tried implementing several guides to creating a circle which fills according to a percentage but i can't seem to get it to work (no animation, only a static CSS circle).

当前遵守的边界是background-image: linear-gradient，我首先将其设置为(90+(360*0.percent))deg，将第二个边界设置为90deg.它在前50％上效果很好，但超出了它的范围，则无法满足要求.

The circle border currently abides to background-image: linear-gradient which i first set to a (90+(360*0.percent))deg and a second one which is set to 90deg. It works well on the first 50% but beyond that it doesn't fill accordingly.

.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的哪些值?

What values of linear-gradient should be changed when i want the circle to be filled for more than 50%?

推荐答案

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

For first linear part, you can use linear-gradient:(270deg,...) for filling 50% of the circle.

对于其他线性零件，可以增大角度(270°+)，以填充超过50％的圆(360°或0°= 75％的圆). .. 90°=圆的100％)

For other linear part, you can increase the angle (270°+) to fill more than 50% of the circle (360° or 0° = 75% of the circle ... 90° = 100% of the circle)

例如:linear-gradient(270deg, black 50%, transparent 50%), linear-gradient(0deg, black 50%, lightgray 50%)组合将创建一个浅灰色背景的圆圈，并填充百分之七十五的黑色. (下面的代码段)

For example: linear-gradient(270deg, black 50%, transparent 50%), linear-gradient(0deg, black 50%, lightgray 50%) combination creates a circle with a lightgray background, filled with seventy-five percent black color. (snippet below)

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

这篇关于用百分比填充圆形边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！