如何僅使用一個(gè) DIV 配合 CSS 實(shí)現(xiàn)餅狀圖？下面本篇文章就來給大家看看實(shí)現(xiàn)方法，希望對(duì)大家有所幫助。

本文為譯文「意譯」

完整的代碼請(qǐng)滑到文末。

我們只使用一個(gè)div，僅采用css實(shí)現(xiàn)餅狀圖。

HTMl 結(jié)構(gòu)

<div class="pie" style="--p:60;--b:10px;--c:purple;">60%</div>

我們添加了幾個(gè) css 的變量：

• --p：進(jìn)度條的百分比（純數(shù)字，不帶%），餅狀圖值和 div 內(nèi)容（帶%）一致。
• --b：邊框厚度的值
• --c：邊框的主體顏色

本文使用的是簡(jiǎn)寫的變量，在生產(chǎn)環(huán)境中，為了達(dá)到可讀性，我們應(yīng)該使用--p -> --percentage， --b -> --border-thickness， --c -> --main-color 來表示。

Pie 的基本設(shè)置

我們?yōu)轱灎顖D設(shè)定基本的樣式。

.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 是正方形，當(dāng)然你也可以使用 height: var(--w) 達(dá)到效果。

接下來，我們使用偽元素實(shí)現(xiàn)簡(jiǎn)單的餅狀圖：

.pie:before {   content: "",   position: absoute;   border-radius: 50%;   inset: 0; // 知識(shí)點(diǎn) 1   background: conic-gradient(var(--c) calc(var(--p)*1%),#0000 0); // 知識(shí)點(diǎn) 2 }

• 知識(shí)點(diǎn)1: inset: 0; 相當(dāng)于 top: 0; right: 0; bottom: 0; top: 0;
• 知識(shí)點(diǎn)2: conic-gradient 圓錐漸變，css 方法,