寫前一篇『用純 HTML + CSS 畫出圓餅圖』在查找資料確認漸層寫法的時候，我發現從根源就解決問題、更厲害更簡單的製作圓餅圖方法．．．
不用很多層複雜又包來包去的 Div 區塊、不用複雜的 CSS ，就能做出圓餅圖！
完成圖
用 CSS 漸層做的圓餅圖
摸索了這麼多種圓餅圖的作法，原來原本的 CSS 漸層就可以達到了．而且還有這麼多玩法，是我對 CSS 的瞭解太淺薄了．．． Orz
看一下用 CSS 漸層做圓餅圖是怎麼辦到的吧！
用 CSS 漸層做圓餅圖
HTML
<div>
用 CSS 漸層做的圓餅圖
<div class="pie"></div>
</div>
CSS
.pie {
width: 100px; /* 寬 */
height: 100px; /* 高 */
border: 3px solid white; /* 邊框 粗3px 實線 白色 */
border-radius: 50%; /* 圓角 50% (變成圓形) */
box-shadow: 0px 1px 5px 5px rgba(0, 0, 0, 0.1); /* 陰影 */
background: conic-gradient(#655 0, #655 60deg, pink 60deg);
}
結束，就這樣，真的就是這麼簡單！
成就圓餅圖效果的部分是下面這行，沒有這行就沒有圓餅圖效果喔！
background: conic-gradient(#655 0, #655 60deg, pink 60deg);
這行在說什麼呢？
我的背景 background 要用圓錐形漸層 conic-gradient 後面的（）包的是顏色和角度，以「,」做區隔。以我的寫法來說就是我的角度 0 ~ 60deg 要套用的顏色是 #655 咖啡色，角度 60deg 開始要套用的是粉紅色，這樣就是一個圓餅圖！
如果想要做出和前一篇相同，外框顯示比例，中間可以放字的圓餅圖，也是同樣的道理，在中間增加一個圓形，再用上下左右距離把圓形推到想放的地方。
用 CSS 漸層做的圓餅圖 - 外框顯示比例，中間可以放字
附上圓餅圖們的 Codepen ～
同場加映會動的圓餅圖～
參考資料：
