在此分享如何純 css 打造圓環進度條。閱讀此文需具備基本數學知識：圓心角、弧度制、三角函式。
為實現如下效果嘔心瀝血：
當然你可以擁抱 svg...在此分享如何純 css 打造圓環進度條，只需三步！
此物乃 2 + 1 夾心餅乾，藍綠色部分為果醬。顯而易見餅乾為兩個削成了圓形的div，我們重點演示果醬是怎麼製作的：
如圖所示，大扇形由6個小扇形構成，每一小扇形佔整個圓餅的1/15，大扇形佔整個圓餅的6/15。我們只需構造乙個扇形單元，將其複製 6 份後旋轉相應角度連線至一起即可。
如何構造扇形？用三角形偽裝...
三角形的寬高如何計算？假定圓半徑$radius為 100px，等分數$count為 15。則小扇形的圓心角為360deg / 15，三角形的高為 100px，寬為2 * 100px * tan(360deg / 15 / 2)。其中360deg / 15 / 2轉化弧度制為pi / 15（pi == 360deg / 2）。
span
複製**
對於$count為1或2的情況需特殊處理，因為tan(pi)及tan(pi / 2)為無窮值，不了解的同學請研究正切函式影象：
span @else if $count == 2 @else
}複製**
@for $index from 0 to $count )
}複製**
2017/11/14 續更
本例除錯方法：
cd sector
sass --watch style.scss:style.css --debug-info
複製**
我的 github：github.com/sunmengyuan
純 Css 繪製扇形
為實現如下效果嘔心瀝血 當然你可以擁抱 svg.在此分享如何純 css 打造圓環進度條，只需三步！此物乃 2 1 夾心餅乾，藍綠色部分為果醬。顯而易見餅乾為兩個削成了圓形的div，我們重點演示果醬是怎麼製作的 如圖所示，大扇形由6個小扇形構成，每一小扇形佔整個圓餅的1 15，大扇形佔整個圓餅的6 1...
css3 繪製畫圓 扇形
css已經越來越強大了 可以使用它來繪製各種簡單的形狀，用於代替顯示，這次的分享主要用到畫圓，扇形 實現圓形 效果如下 border radius圓角的四個值按順序取值分別為 左上 右上 右下 左下。這裡只設定乙個值，代表四個角的取值都為為50 原理 border radius 50 彎曲元素的邊框...
純CSS繪製箭頭
這幾天研究別人的 發現別人的箭頭居然是用純css寫的。瞬間覺得高大上。細細研究其中的原理，發現其實也很簡單。繪製箭頭，首先應該懂得如何用純css繪製三角形。我們先做乙個寬高為0，有邊框的div看一看效果。width 0 height 0 border 50px solid border color ...