僅使用 css 的百分比餅圖

Question

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

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

問題是

1. 如何創建元素#2？
2. 如何管理元素 #2 的形狀以獲得更小 (5%) 或更高百分比 (80%) 的值？

Answer 1

2021年新答案

通過一些現代技術，我們可以改進代碼。 您可以有圓形邊緣，也可以考慮動畫：

 @property --p{ syntax: '<number>'; inherits: true; initial-value: 1; } .pie { --p:20; /* the percentage */ --b:22px; /* the thickness */ --c:darkred; /* the color */ --w:150px; /* the size*/ width:var(--w); aspect-ratio:1/1; position:relative; display:inline-grid; margin:5px; place-content:center; font-size:25px; font-weight:bold; font-family:sans-serif; } .pie:before, .pie:after { content:""; position:absolute; border-radius:50%; } .pie:before { inset:0; background: radial-gradient(farthest-side,var(--c) 98%,#0000) top/var(--b) var(--b) no-repeat, conic-gradient(var(--c) calc(var(--p)*1%),#0000 0); -webkit-mask:radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b))); mask:radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b))); } .pie:after { inset:calc(50% - var(--b)/2); background:var(--c); transform:rotate(calc(var(--p)*3.6deg - 90deg)) translate(calc(var(--w)/2 - 50%)); } .animate { animation:p 1s .5s both; } .no-round:before { background-size:0 0,auto; } .no-round:after { content:none; } @keyframes p{ from{--p:0;} } body { background:#ddd; }

 <div class="pie" style="--p:20"> 20%</div> <div class="pie" style="--p:40;--c:darkblue;--b:10px"> 40%</div> <div class="pie no-round" style="--p:60;--c:purple;--b:15px"> 60%</div> <div class="pie animate" style="--p:80;--c:orange;"> 80%</div> <div class="pie animate no-round" style="--p:90;--c:lightgreen"> 90%</div>

舊答案

您可以在多個背景下執行此操作。

從0%到50% :

 .box { width: 100px; height: 100px; display: inline-block; border-radius: 50%; padding: 5px; background: linear-gradient(#ccc, #ccc) content-box, linear-gradient(var(--v), #f2f2f2 50%, transparent 0), linear-gradient(to right, #f2f2f2 50%, blue 0); }

 <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%; padding:5px; background: linear-gradient(#ccc,#ccc) content-box, linear-gradient(var(--v), blue 50%,transparent 0), linear-gradient(to right, #f2f2f2 50%,blue 0); }

 <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%; padding:5px; background: linear-gradient(#ccc,#ccc) content-box, linear-gradient(var(--v), #f2f2f2 50%,transparent 0) 0/calc(var(--s)*100%) , linear-gradient(var(--v), blue 50%,transparent 0) 0/calc((1 - var(--s))*100%), linear-gradient(to right, #f2f2f2 50%,blue 0); }

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

現在我們可以像下面這樣優化以考慮百分比值：

 .box { --v:calc( ((18/5) * var(--p) - 90)*1deg); width:100px; height:100px; display:inline-block; border-radius:50%; padding:10px; background: linear-gradient(#ccc,#ccc) content-box, linear-gradient(var(--v), #f2f2f2 50%,transparent 0) 0/min(100%,(50 - var(--p))*100%), linear-gradient(var(--v), transparent 50%,blue 0) 0/min(100%,(var(--p) - 50)*100%), linear-gradient(to right, #f2f2f2 50%,blue 0); }

 <div class="box" style="--p:5;"></div> <div class="box" style="--p:20;"></div> <div class="box" style="--p:50;"></div> <div class="box" style="--p:60;"></div> <div class="box" style="--p:75;"></div> <div class="box" style="--p:100;"></div>

獲取另一個版本的相關問題： Creating a static pie chart with CSS

---

我們還可以考慮使用mask來增加透明度：

 .box { --v:calc( ((18/5) * var(--p) - 90)*1deg); width:100px; height:100px; display:inline-block; border-radius:50%; padding:10px; background: linear-gradient(var(--v), #f2f2f2 50%,transparent 0) 0/min(100%,(50 - var(--p))*100%), linear-gradient(var(--v), transparent 50%,blue 0) 0/min(100%,(var(--p) - 50)*100%), linear-gradient(to right, #f2f2f2 50%,blue 0); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:destination-out; mask-composite:exclude; } body { background:linear-gradient(to right,red,yellow); }

 <div class="box" style="--p:5;"></div> <div class="box" style="--p:20;"></div> <div class="box" style="--p:50;"></div> <div class="box" style="--p:60;"></div> <div class="box" style="--p:75;"></div> <div class="box" style="--p:100;"></div>

也像下面：

 .box { --v:calc( ((18/5) * var(--p) - 90)*1deg); width:100px; height:100px; display:inline-block; border-radius:50%; padding:10px; background: linear-gradient(var(--v), transparent 50%,blue 0) 0/min(100%,(var(--p) - 50)*100%), linear-gradient(to right, transparent 50%,blue 0); -webkit-mask: linear-gradient(var(--v), #f2f2f2 50%,transparent 0) 0/min(100%,(50 - var(--p))*100%), linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:destination-out; mask-composite:exclude; } body { background:linear-gradient(to right,red,yellow); }

 <div class="box" style="--p:5;"></div> <div class="box" style="--p:20;"></div> <div class="box" style="--p:50;"></div> <div class="box" style="--p:60;"></div> <div class="box" style="--p:75;"></div> <div class="box" style="--p:100;"></div>

相關：具有邊界半徑的邊界漸變

Answer 2

使用新的conic gradient ，這可以通過一個 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>

Answer 3

嘿，你可以添加小的 CSS 樣式

.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(0deg, lightgray 100%, black 0%)
}

HTML

<div class="circle-border" id="circleElement">
  <div class="circle" id="circleElementValue">
    aaa
  </div>
</div>

JS：自動顯示填充百分比

// let i = 75;
//   let deg=Math.round(1.8*i); 
//   let completed=0;
//   let remaining=100-i;
//   // completed = (remaining>50)? 50 : completed;
// let backgroundStlye = 'linear-gradient('+deg+'deg, lightgray '+remaining +'%, black '+completed + '%)';
//   setTimeout(function(){
//     console.log(backgroundStlye);
//   document.getElementById("circleElement").style.background =backgroundStlye;
// },i*100);

for(let i=1;i<=100;i++){
  let deg=Math.round(1.8*i); 
  let completed=i;
  let remaining=100-i;
  completed = (remaining<50)? 0 : completed;
let backgroundStlye = 'linear-gradient('+deg+'deg, lightgray '+remaining +'%, black '+completed + '%)';
  setTimeout(function(){
    console.log(backgroundStlye);
  document.getElementById("circleElement").style.background =backgroundStlye;
    document.getElementById("circleElementValue").innerHTML = i+'%';
},i*100);
}

我創建了示例https://codepen.io/arun-b-shet/pen/mdVVWXo

希望你喜歡yyyyyyyyyyy