html - 僅包含css的百分比餅圖




charts pie-chart (2)

我發現了非常好的“百分比餅圖”並且只想用CSS創建它。 不需要動畫。 只是靜態的“圖片”。

我明白如果我想創建這種圖表,我需要使用這些元素

問題是

  1. 如何創建元素#2?
  2. 如何管理較小(5%)或更高百分比(80%)值的元素#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>


您可以使用多個背景執行此操作。

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>





pie-chart