css画扇形按钮

最近项目中需要制作一个扇形按钮，效果是这样的：

周围四个扇形，和中间的小圆，全是能点击的。这就需要画扇形。百度了一下，有很多文章讲了如何生成扇形，最后我借鉴了一个最简单的实现方式，使用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，比原来少了一像素，这样互相之间就有个小空隙，更好看，显得更高极。

最后附上代码：

 <!DOCTYPE html>
 <html>
     <head>
         <meta charset="utf-8">
         <title></title>
         <style>
             body{background: #525252;}
             .sector{position: relative;width: 200px;height: 200px;margin: 0 auto;border: 2px solid #4a4a4a;border-radius: 50%;background: #4a4a4a;}
             .sector .box{position: absolute;width: 200px;height: 200px;border-radius: 50%;clip: rect(0px, 99px, 99px, 0);}
             .sector .box,
             .sector .center{transition: 0.5s;background: #5e5e5e;cursor: pointer;}
             .sector .box:hover,
             .sector .center:hover{background: #777;}
             .sector .s1{transform: rotate(45deg);}
             .sector .s2{transform: rotate(135deg);}
             .sector .s3{transform: rotate(-135deg);}
             .sector .s4{transform: rotate(-45deg);}
             .sector .center{width: 90px;height: 90px;position: absolute;left: 54px;top: 54px;border: 2px solid #4a4a4a;border-radius: 50%;}
         </style>
     </head>
     <body>
         <div class="sector">
             <div class="box s1"></div>
             <div class="box s2"></div>
             <div class="box s3"></div>
             <div class="box s4"></div>
             <div class="center"></div>
         </div>
     </body>
 </html>

怎么样，是不是超简单的，新技能，get！