爬了很多文，終於做出不用外掛的純 HTML + CSS 的圓餅圖。
在 AC 的課程作業中有練習為鋼鐵人製作簡單的名片及介紹網頁，我在做的時候就一直想著之後也要為自己做網頁版名片和履歷！
上網搜尋看到別人的作品用圓餅圖或是長條圖來呈現技能熟練度，我原本想說：「喔，就放幾張圖片就好了。」，準備要開始用 AI 畫圖之前，覺得先用 Devtools 看一下那個人的圖是怎麼做的好了，看一下完全佩服耶！人家是用語法寫的，不是放圖片！
我看到的履歷畫面類似這樣
（圖片截自網路上別人的作品，點圖片可以進去原作的 Codepen）
我看了很想學的圓餅圖
當時看到這個呈現方式就非常想學，上網查了很多關鍵字，但網路上的文章很多都是用外掛套件做的，很少用純 HTML + CSS 做，我有查到原作者做這個圓餅圖的原理跟教學，同一篇也有教長條圖和其他圖的畫法，非常實用，但我覺得原理有點複雜，後來我又找到了幾篇覺得比較好理解的，我會一併把參考文章放在最後呦！
跟著實作了之後我做了兩款不同的樣子，一種是單純圓餅圖，字要放外面；另一種是外框顯示比例，中間可以放字。
看看成品
以 50% 作為區分，50% 以下和 50% 以上的作法有一點點不一樣，所以有四個圓餅圖。
開始第一步啦～
先畫出兩個 Div 區塊，這不是圓餅圖本體，只是為了讓圓餅圖整齊排好所以先做的排版，背景色設定淺紫色是方便看區塊的位置及大小，也可以用別的顏色或是不要設定背景顏色。
先畫出兩個淺紫色 Div 區塊，方便看區塊的位置及大小
程式碼
HTML
<div>不會動的圓餅圖<br>(小於50%)</div>
<div>不會動的圓餅圖<br>(大於50%)</div>
CSS
div {
width: 200px; /* 寬 */
height: 200px; /* 高 */
display: inline-block; /* 橫向排列 */
margin: 20px; /* 外距 20px */
background: #f1eaff; /* 背景淺紫色*/
text-align: center; /* 文字置中對齊 */
font-size: 1em; /* 文字大小 1em */
color: #146b9b; /* 文字深藍色 */
}
接下來是圓餅圖了，兩個圓餅長一樣，所以用同一個CSS 的選擇器。
.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); /* 陰影 */
}
文章講述的原理是利用漸層背景的方式製作出圓餅圖，先把圓餅圖切一半，上面再利用一個圖層遮罩偽元素讓增減的百分比顯示或隱藏。
兩個圓餅圖共同一個選擇器，添加線性漸層的背景，顏色一半是背景色，另一半則是可以自訂的顏色。
background-image: /* 背景為線性漸層 */ linear-gradient(
/* 方向為向右 */ to right,
/* 左半邊為背景圖片的顏色 */ transparent 50%,
/* 右半邊為深咖啡色 */ #655 0%
);
寫完之後會長這樣
添加線性漸層的背景，將圓餅圖切半
線性漸層的撰寫方式
background:linear-gradient(方向, 顏色1 位置, 顏色2 位置);
接下來用偽元素覆蓋在兩個圓餅圖上層，做出圓餅圖不同的 % 數，到這裡因為兩個圓餅圖的 % 數不同了，所以選擇器要分開寫喔～
/* 加入上方遮罩偽元素 <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 區塊。
HTML
<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>
CSS
.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 絕對定位了，接下來要利用上下左右距離，把上面的圓形區塊推到正中間，或是也可以利用這種方式把圓形推到其他想放的位置。
CSS
.pie1-m {
left: 69px;
top: 83px;
}
.pie2-m {
left: 312px;
top: 83px;
}
這裡要注意的是，依照我的排版方式，我的圓形跟上方和左方的距離是這樣的數值．如果排版的方式改變了，距離也會改變，所以要依照自己的排版去調整上下左右的距離數值喔！
調整完就得到好看的圓餅圖了！
（上面背景利用淺紫色、圓形用淺藍色，是為了讓區塊看得清楚，做完之後也可以再調整～）
附上圓餅圖們的 Codepen ～
參考資料：
純 HTML + CSS 的圓餅圖參考這篇（有包含長條圖畫法）
這裡練習的是參考這兩篇（兩篇原理相同，但詳細度和講解方法不同。）
