用百分比填充圆形边框

时间:2018-12-29 22:51:35

标签: css css3 css-shapes linear-gradients

我尝试实施一些指南来创建根据百分比填充的圆,但是我似乎无法使其正常工作(没有动画,只有一个静态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的哪些值?

2 个答案:

答案 0 :(得分:0)

对于第一个线性部分,您可以使用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%)组合创建一个浅灰色背景的圆,并填充百分之七十五的黑色。 (下面的代码段)

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

答案 1 :(得分:-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>

只需玩数字。