我找到了非常不错的“百分比饼图”,并且只想用CSS创建它。不需要动画。只是静态的“图片”。
我了解如果我想创建此类图表,则需要使用以下元素
问题是
您可以在多个背景下执行此操作。
从0%
到50%
:
.box {
width: 100px;
height: 100px;
display: inline-block;
border-radius: 50%;
border: 5px solid transparent;
background:
linear-gradient(#ccc, #ccc) padding-box,
linear-gradient(var(--v), #f2f2f2 50%, transparent 0) border-box,
linear-gradient(to right, #f2f2f2 50%, blue 0) border-box;
}
<div class="box" style="--v:-90deg"></div><!-- 0% -->
<div class="box" style="--v:-45deg"></div><!-- 12.5% -->
<div class="box" style="--v: 0deg"></div><!-- 25% -->
<div class="box" style="--v: 45deg"></div><!-- 37.5% -->
<div class="box" style="--v: 90deg"></div><!-- 50% -->
<p>The formula is [p = (18/5) * x - 90]. <small>Where x is the percentage and p the degree</small></p>
<p>for x = 5% --> p = -72deg </p>
<div class="box" style="--v:-72deg"></div>
从50%
到100%
:
.box {
width:100px;
height:100px;
display:inline-block;
border-radius:50%;
border:5px solid transparent;
background:
linear-gradient(#ccc,#ccc) padding-box,
linear-gradient(var(--v), blue 50%,transparent 0) border-box,
linear-gradient(to right, #f2f2f2 50%,blue 0) border-box;
}
<div class="box" style="--v:-90deg"></div><!-- 50% -->
<div class="box" style="--v:-45deg"></div><!-- 62.5% -->
<div class="box" style="--v: 0deg"></div><!-- 75% -->
<div class="box" style="--v: 45deg"></div><!-- 87.5% -->
<div class="box" style="--v: 90deg"></div><!-- 100% -->
<p>The formula is [p = (18/5) * x - 270]. <small>Where x is the percentage and p the degree</small></p>
<p>for x = 80% --> p = 18deg </p>
<div class="box" style="--v:18deg"></div>
您可以像这样组合两者:
.box {
width:100px;
height:100px;
display:inline-block;
border-radius:50%;
border:5px solid transparent;
background:
linear-gradient(#ccc,#ccc) padding-box,
linear-gradient(var(--v), #f2f2f2 50%,transparent 0) center/calc(var(--s)*100%) border-box,
linear-gradient(var(--v), blue 50%,transparent 0) center/calc(100% - var(--s)*100%) border-box,
linear-gradient(to right, #f2f2f2 50%,blue 0) border-box;
}
<div class="box" style="--v:-90deg;--s:1"></div>
<div class="box" style="--v:0deg;--s:1"></div>
<div class="box" style="--v:90deg;--s:1"></div>
<div class="box" style="--v:0deg;--s:0"></div>
<div class="box" style="--v:90deg;--s:0"></div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句