站長資訊網本篇文章給大家帶來了關于怎樣使用一個div配合css實現病狀圖的相關問題，希望對大家有幫助。
完整的代碼請滑到文末。
我們只使用一個div，僅采用css實現餅狀圖。
HTMl 結構
<div class="pie" style="--p:60;--b:10px;--c:purple;">60%</div>
我們添加了幾個 css 的變量：
-
–p：進度條的百分比（純數字，不帶%），餅狀圖值和 div 內容（帶%）一致。
-
–b：邊框厚度的值
-
–c：邊框的主體顏色
本文使用的是簡寫的變量，在生產環境中，為了達到可讀性，我們應該使用–p -> –percentage， –b -> –border-thickness， –c -> –main-color 來表示。
Pie 的基本設置
我們為餅狀圖設定基本的樣式。
.pie { --w: 150px; // --w -> --width width: var(--w); aspect-ratio: 1; // 縱橫比，1 說明是正方形 display: inline-grid; place-content: center; margin: 5px; font-size: 25px; font-weight: bold; font-family: sans-serif; }
上面我們使用了 aspect-ratio: 1; 保證 div 是正方形，當然你也可以使用 height: var(–w) 達到效果。
接下來，我們使用偽元素實現簡單的餅狀圖：
.pie:before { content: "", position: absoute; border-radius: 50%; inset: 0; // 知識點 1 background: conic-gradient(var(--c) calc(var(--p)*1%),#0000 0); // 知識點 2 }
知識點1: inset: 0; 相當于 top: 0; right: 0; bottom: 0; top: 0;
知識點2: conic-gradient 圓錐漸變，css 方法,
