寫前一篇『用純 HTML + CSS 畫出圓餅圖』在查找資料確認漸層寫法的時候，我發現從根源就解決問題、更厲害更簡單的製作圓餅圖方法．．．

不用很多層複雜又包來包去的 Div 區塊、不用複雜的 CSS ，就能做出圓餅圖！

完成圖

用 CSS 漸層做的圓餅圖

摸索了這麼多種圓餅圖的作法，原來原本的 CSS 漸層就可以達到了．而且還有這麼多玩法，是我對 CSS 的瞭解太淺薄了．．． Orz

看一下用 CSS 漸層做圓餅圖是怎麼辦到的吧！

用 CSS 漸層做圓餅圖 - 程式碼

1
2
3
4
<div>
  用 CSS 漸層做的圓餅圖
  <div class="pie"></div>
</div>
1
2
3
4
5
6
7
8
.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);
}

結束，就這樣，真的就是這麼簡單！

成就圓餅圖效果的部分是下面這行，沒有這行就沒有圓餅圖效果喔！

1
background: conic-gradient(#655 0, #655 60deg, pink 60deg);

這行在說什麼呢？

我的背景 background 要用圓錐形漸層 conic-gradient 後面的（）包的是顏色和角度，以「,」做區隔。以我的寫法來說就是我的角度 0 ~ 60deg 要套用的顏色是 #655 咖啡色，角度 60deg 開始要套用的是粉紅色，這樣就是一個圓餅圖！

如果想要做出和前一篇相同，外框顯示比例，中間可以放字的圓餅圖，也是同樣的道理，在中間增加一個圓形，再用上下左右距離把圓形推到想放的地方。

用 CSS 漸層做的圓餅圖 - 外框顯示比例，中間可以放字

附上圓餅圖們的 Codepen ～

參考資料：
深入理解 CSS 漸層 ( CSS Gradient )
MDN - conic-gradient()