仅具有CSS的百分比饼图

Question

我已经找到了非常不错的“百分比饼图”，并且只想用CSS创建它。不需要动画。只是静态的“图片”。

我了解如果我想创建此类图表，则需要使用类似以下的元素

问题是

1. 如何创建元素＃2？

2. 如何为较小（5％）或较高百分比（80％）的值管理元素＃2的形状？

Answer 1

您可以在多个背景下执行此操作。从0%到50%：.box {&nbsp; width: 100px;&nbsp; height: 100px;&nbsp; display: inline-block;&nbsp; border-radius: 50%;&nbsp; border: 5px solid transparent;&nbsp; background:&nbsp;&nbsp; &nbsp; linear-gradient(#ccc, #ccc) padding-box,&nbsp;&nbsp; &nbsp; linear-gradient(var(--v), #f2f2f2 50%, transparent 0) border-box,&nbsp; &nbsp; 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:&nbsp; 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 {&nbsp; width:100px;&nbsp; height:100px;&nbsp; display:inline-block;&nbsp; border-radius:50%;&nbsp; border:5px solid transparent;&nbsp; background:&nbsp; &nbsp; linear-gradient(#ccc,#ccc) padding-box,&nbsp; &nbsp; linear-gradient(var(--v), blue 50%,transparent 0) border-box,&nbsp; &nbsp; 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:&nbsp; 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 {&nbsp; width:100px;&nbsp; height:100px;&nbsp; display:inline-block;&nbsp; border-radius:50%;&nbsp; border:5px solid transparent;&nbsp; background:&nbsp; &nbsp; linear-gradient(#ccc,#ccc) padding-box,&nbsp; &nbsp; linear-gradient(var(--v), #f2f2f2 50%,transparent 0) center/calc(var(--s)*100%) border-box,&nbsp; &nbsp; linear-gradient(var(--v), blue 50%,transparent 0) center/calc(100% - var(--s)*100%) border-box,&nbsp; &nbsp; 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>

Answer 2

使用新的圆锥体渐变，可以使用一个div来进行管理，该div刚刚作为实验属性进入Chrome浏览器。:root {&nbsp; --size: 100px;&nbsp; --bord: 10px;}.chart {&nbsp; width: var(--size);&nbsp; height: var(--size);&nbsp; margin: 1em auto;&nbsp; border-radius: 50%;&nbsp; background-image: conic-gradient(lightseagreen var(--value), lightgrey var(--value));&nbsp; position: relative;&nbsp; display: flex;&nbsp; justify-content: center;&nbsp; align-items: center;}.chart::after {&nbsp; content: "";&nbsp; position: absolute;&nbsp; left: 50%;&nbsp; top: 50%;&nbsp; transform: translate(-50%, -50%);&nbsp; width: calc(100% - var(--bord));&nbsp; height: calc(100% - var(--bord));&nbsp; background: white;&nbsp; border-radius: inherit;}p {&nbsp; position: relative;&nbsp; z-index: 1;&nbsp; font-size: 2em;}.x-60 {&nbsp; --value: 60%;}.x-20 {&nbsp; --value: 20%;}<div class="chart x-60">&nbsp; <p>60%</p></div><div class="chart x-20">&nbsp; <p>20%</p></div>多亏了Temani Afif，可以在没有使用边框和伪造元素的伪元素的情况下实现此目标background-clip。&nbsp;background:&nbsp;&nbsp; &nbsp; linear-gradient(white,white) padding-box,&nbsp; &nbsp; conic-gradient(lightseagreen var(--value), lightgrey var(--value)) border-box;:root {&nbsp; --size: 100px;&nbsp; --bord: 10px;}.chart {&nbsp; width: var(--size);&nbsp; height: var(--size);&nbsp; margin: 1em auto;&nbsp; border: var(--bord) solid transparent;&nbsp; border-radius: 50%;&nbsp; background: linear-gradient(white, white) padding-box, conic-gradient(lightseagreen var(--value), lightgrey var(--value)) border-box;&nbsp; position: relative;&nbsp; display: flex;&nbsp; justify-content: center;&nbsp; align-items: center;&nbsp; font-size: 2em;}.x-60 {&nbsp; --value: 60%;}.x-20 {&nbsp; --value: 20%;}<div class="chart x-60">&nbsp; <p>60%</p></div><div class="chart x-20">&nbsp; <p>20%</p></div>