爬了很多文，終於做出不用外掛的純 HTML + CSS 的圓餅圖。

在 AC 的課程作業中有練習為鋼鐵人製作簡單的名片及介紹網頁，我在做的時候就一直想著之後也要為自己做網頁版名片和履歷！

上網搜尋看到別人的作品用圓餅圖或是長條圖來呈現技能熟練度，我原本想說：「喔，就放幾張圖片就好了。」，準備要開始用 AI 畫圖之前，覺得先用 Devtools 看一下那個人的圖是怎麼做的好了，看一下完全佩服耶！人家是用語法寫的，不是放圖片！

我看到的履歷畫面類似這樣
（圖片截自網路上別人的作品）

我看了很想學的圓餅圖

當時看到這個呈現方式就非常想學，上網查了很多關鍵字，但網路上的文章很多都是用外掛套件做的，很少用純 HTML + CSS 做，我有查到原作者做這個圓餅圖的原理跟教學，同一篇也有教長條圖和其他圖的畫法，非常實用，但我覺得原理有點複雜，後來我又找到了幾篇覺得比較好理解的，我會一併把參考文章放在最後呦！

跟著實作了之後我做了兩款不同的樣子，一種是單純圓餅圖，字要放外面；另一種是外框顯示比例，中間可以放字。

看看成品

以 50% 作為區分，50% 以下和 50% 以上的作法有一點點不一樣，所以有四個圓餅圖。

四種圓餅圖成品

先做單純的圓餅圖，字要放外面，開始第一步啦～

先畫出兩個 Div 區塊，這不是圓餅圖本體，只是為了讓圓餅圖整齊排好所以先做的排版，背景色設定淺紫色是方便看區塊的位置及大小，也可以用別的顏色或是不要設定背景顏色。

先畫出兩個淺紫色 Div 區塊，方便看區塊的位置及大小

程式碼

1
2
<div>不會動的圓餅圖<br>(小於50%)</div>
<div>不會動的圓餅圖<br>(大於50%)</div>
1
2
3
4
5
6
7
8
9
10
div {
  width: 200px; /* 寬 */
  height: 200px; /* 高 */
  display: inline-block; /* 橫向排列 */
  margin: 20px; /* 外距 20px */
  background: #f1eaff; /* 背景淺紫色*/
  text-align: center; /* 文字置中對齊 */
  font-size: 1em; /* 文字大小 1em */
  color: #146b9b; /* 文字深藍色 */
}

接下來是圓餅圖了，兩個圓餅長一樣，所以用同一個CSS 的選擇器。

1
2
3
4
5
6
7
8
.pie1, .pie2 {
  width: 100px; /* 寬 */
  height: 100px; /* 高 */
  background: pink; /* 背景粉紅色*/
  border: 3px solid white; /* 邊框 粗3px 實線 白色 */
  border-radius: 50%; /* 圓角 50% (變成圓形) */
  box-shadow: 0px 1px 5px 5px rgba(0, 0, 0, 0.1); /* 陰影 */
}

先畫出原始的圓餅圖

文章講述的原理是利用漸層背景的方式製作出圓餅圖，先把圓餅圖切一半，上面再利用一個圖層遮罩偽元素讓增減的百分比顯示或隱藏。

兩個圓餅圖共同一個選擇器，添加線性漸層的背景，顏色一半是背景色，另一半則是可以自訂的顏色。

1
2
3
4
5
background-image: /* 背景為線性漸層 */ linear-gradient(
    /* 方向為向右 */ to right,
    /* 左半邊為背景圖片的顏色 */ transparent 50%,
    /* 右半邊為深咖啡色 */ #655 0%
  );

添加線性漸層的背景，將圓餅圖切半，寫完之後會長這樣。

添加線性漸層的背景，將圓餅圖切半

線性漸層的撰寫方式

background:linear-gradient(方向, 顏色1 位置, 顏色2 位置);

接下來用偽元素覆蓋在兩個圓餅圖上層，做出圓餅圖不同的 % 數，到這裡因為兩個圓餅圖的 % 數不同了，所以選擇器要分開寫喔～

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/* 加入上方遮罩偽元素 <50% */
.pie1::before {
  content: "";
  display: block;
  margin-left: 50%;
  height: 100%;
  border-radius: 0 100% 100% 0 / 50%;
  background-color: inherit;
  transform-origin: left;
  transform: rotate(0.2turn);
}
/* 加入上方遮罩偽元素 >50% */
.pie2::before {
  content: "";
  display: block;
  margin-left: 50%;
  height: 100%;
  border-radius: 0 100% 100% 0 / 50%;
  background: #655;
  transform-origin: left;
  transform: rotate(0.1turn);
}

為兩個圓餅圖添加偽元素

到這邊就完成單純的圓餅圖了，文字要放外面，如果想要做外框顯示比例，中間可以放字的圓餅圖的話，我在圓餅圖中間再加上一個圓形。

來做外框顯示比例，中間可以放字的圓餅圖

在兩個圓餅圖區塊裡面各加上一個 div 區塊

1
2
3
4
5
6
7
8
9
10
11
12
<div>
  不會動的圓餅圖<br>(小於50%)
  <div class="pie1">
    <div class="pie1-m">PS</div>
  </div>
</div>
<div>
  不會動的圓餅圖<br>(大於50%)
  <div class="pie2">
    <div class="pie2-m">PS</div>
  </div>
</div>

1
2
3
4
5
6
7
8
9
10
11
.pie1-m,
.pie2-m {
  width: 80px; /* 寬 */
  height: 80px; /* 高 */
  background: #d6ebff; /* 背景淺藍色 */
  border-radius: 50%; /* 圓角 50% (變成圓形) */
  position: absolute; /* 位置是絕對定位 */
  display: flex;
  align-items: center;
  justify-content: center;
}

到這裡會緊張，為什麼上面的圓形不在圓餅圖正中間？

沒關係！在上面的 CSS 裡我們已經把這個圓形區塊定位方式設定成 absolute 絕對定位了，接下來要利用上下左右距離，把上面的圓形區塊推到正中間，或是也可以利用這種方式把圓形推到其他想放的位置。

利用上下左右距離，把上面的圓形區塊推到正中間

1
2
3
4
5
6
7
8
.pie1-m {
  left: 69px;
  top: 83px;
}
.pie2-m {
  left: 312px;
  top: 83px;
}

這裡要注意的是，依照我的排版方式，我的圓形跟上方和左方的距離是這樣的數值．如果排版的方式改變了，距離也會改變，所以要依照自己的排版去調整上下左右的距離數值喔！

調整完就得到好看的圓餅圖了！
（上面背景利用淺紫色、圓形用淺藍色，是為了讓區塊看得清楚，做完之後也可以再調整～）

好看的圓餅圖

附上圓餅圖們的 Codepen ～

參考資料：
純 HTML + CSS 的圓餅圖參考這篇（有包含長條圖畫法）
hahow好學校 - 動畫互動網頁程式入門 (HTML/CSS/JS)
這裡練習的是參考這兩篇（兩篇原理相同，但詳細度和講解方法不同。）
Secret 14: 簡單的圓餅圖 (CSS transforms)
用css能實現一個圓等分12份的樣子嗎？