最近項目中需要制作一個扇形按鈕，效果是這樣的：
周圍四個扇形，和中間的小圓，全是能點擊的。這就需要畫扇形。百度了一下，有很多文章講了如何生成扇形，最后我借鑒了一個最簡單的實現方式，使用css的clip屬性，完美實現。
參考文章為：http://www.cnblogs.com/zhidong123/p/6026761.html，對作者表示感謝。
clip，剪裁圖像，
（來自w3school：http://www.w3school.com.cn/cssref/pr_pos_clip.asp）
我的偶像張鑫旭早在2011年就寫過關於clip的博文，https://www.zhangxinxu.com/wordpress/2011/04/css-clip-rect/，他網站上關於clip還有很多其他文章，都可以看看。
好了，說到我要實現的這個扇形按鈕組，
首先最外面肯定有一個圓形：
然后，再畫一個圓形，設成絕對定位，並加上背景色：
接着，進行裁剪，把右邊、下邊全部裁掉，只留下左上角，clip: rect(0px, 100px, 100px, 0px);
再旋轉一下角度，轉45度就好：
如此這般，再畫三個圓，進行同樣的裁剪，只是旋轉的角度不同。就會得到四塊“蛋糕” ：
最后再往中間貼一塊小圓：
成功啦！
調整成效果圖中的顏色，並加上邊框，調整細節，注意裁剪的數值為99，比原來少了一像素，這樣互相之間就有個小空隙，更好看，顯得更高極。
最后附上代碼：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 body{background: #525252;} 8 .sector{position: relative;width: 200px;height: 200px;margin: 0 auto;border: 2px solid #4a4a4a;border-radius: 50%;background: #4a4a4a;} 9 .sector .box{position: absolute;width: 200px;height: 200px;border-radius: 50%;clip: rect(0px, 99px, 99px, 0);} 10 .sector .box, 11 .sector .center{transition: 0.5s;background: #5e5e5e;cursor: pointer;} 12 .sector .box:hover, 13 .sector .center:hover{background: #777;} 14 .sector .s1{transform: rotate(45deg);} 15 .sector .s2{transform: rotate(135deg);} 16 .sector .s3{transform: rotate(-135deg);} 17 .sector .s4{transform: rotate(-45deg);} 18 .sector .center{width: 90px;height: 90px;position: absolute;left: 54px;top: 54px;border: 2px solid #4a4a4a;border-radius: 50%;} 19 </style> 20 </head> 21 <body> 22 <div class="sector"> 23 <div class="box s1"></div> 24 <div class="box s2"></div> 25 <div class="box s3"></div> 26 <div class="box s4"></div> 27 <div class="center"></div> 28 </div> 29 </body> 30 </html>
怎么樣，是不是超簡單的，新技能，get！