仅具有CSS的百分比饼图

Question

我已经找到了非常不错的“百分比饼图”，并且只想用CSS创建它。不需要动画。只是静态的“图片”。我了解如果我想创建此类图表，则需要使用类似以下的元素问题是如何创建元素＃2？如何为较小（5％）或较高百分比（80％）的值管理元素＃2的形状？

Answer 1

您可以在多个背景下执行此操作。

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

Answer 2

使用新的圆锥体渐变，可以使用一个div来进行管理，该div刚刚作为实验属性进入Chrome浏览器。

:root {

  --size: 100px;

  --bord: 10px;

}

.chart {

  width: var(--size);

  height: var(--size);

  margin: 1em auto;

  border-radius: 50%;

  background-image: conic-gradient(lightseagreen var(--value), lightgrey var(--value));

  position: relative;

  display: flex;

  justify-content: center;

  align-items: center;

}

.chart::after {

  content: "";

  position: absolute;

  left: 50%;

  top: 50%;

  transform: translate(-50%, -50%);

  width: calc(100% - var(--bord));

  height: calc(100% - var(--bord));

  background: white;

  border-radius: inherit;

}

p {

  position: relative;

  z-index: 1;

  font-size: 2em;

}

.x-60 {

  --value: 60%;

}

.x-20 {

  --value: 20%;

}

<div class="chart x-60">

  <p>60%</p>

</div>

<div class="chart x-20">

  <p>20%</p>

</div>

多亏了Temani Afif，可以在没有使用边框和伪造元素的伪元素的情况下实现此目标background-clip。

 background: 

    linear-gradient(white,white) padding-box,

    conic-gradient(lightseagreen var(--value), lightgrey var(--value)) border-box;

:root {

  --size: 100px;

  --bord: 10px;

}

.chart {

  width: var(--size);

  height: var(--size);

  margin: 1em auto;

  border: var(--bord) solid transparent;

  border-radius: 50%;

  background: linear-gradient(white, white) padding-box, conic-gradient(lightseagreen var(--value), lightgrey var(--value)) border-box;

  position: relative;

  display: flex;

  justify-content: center;

  align-items: center;

  font-size: 2em;

}

.x-60 {

  --value: 60%;

}

.x-20 {

  --value: 20%;

}

<div class="chart x-60">

  <p>60%</p>

</div>

<div class="chart x-20">

  <p>20%</p>

</div>