按百分比填充圆形边框
Filling a circle border by percent
我尝试实施几个指南来创建一个根据百分比填充的圆圈,但我似乎无法让它工作(没有动画,只有一个静态 CSS 圆圈)。
圆形边框目前遵循 background-image: linear-gradient
,我首先将其设置为 (90+(360*0.percent))deg
,将第二个设置为 90deg
。它在前 50% 上运行良好,但超过 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
的哪些值?
.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>
只需要玩玩数字。
对于第一个线性部分,您可以使用 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>
我尝试实施几个指南来创建一个根据百分比填充的圆圈,但我似乎无法让它工作(没有动画,只有一个静态 CSS 圆圈)。
圆形边框目前遵循 background-image: linear-gradient
,我首先将其设置为 (90+(360*0.percent))deg
,将第二个设置为 90deg
。它在前 50% 上运行良好,但超过 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
的哪些值?
.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>
只需要玩玩数字。
对于第一个线性部分,您可以使用 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>