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

周围四个扇形，和中间的小圆，全是能点击的。这就需要画扇形。百度了一下，有很多文章讲了如何生成扇形，最后我借鉴了一个最简单的实现方式，使用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！

css画扇形按钮的更多相关文章

  1. 一步一步教你用CSS画爱心

    今天小颖给大家分享一个用CSS画的爱心,底下有代码和制作过程,希望对大家有所帮助. 第一步: 先画一个正方形.如图: <!DOCTYPE html> <html> <he ...

  2. 参考bootstrap中的popover.js的css画消息弹框

    前段时间小颖的大学同学给小颖发了一张截图,图片类似下面这张图: 小颖当时大概的给她说了下,其实小颖也不知道上面那个三角形怎么画嘻嘻,给她说了DOM结构,具体的css让她自己百度,今天小颖自己参考boo ...

  3. Effective前端3：用CSS画一个三角形

    p { text-indent: 2em } .triangle-container p { text-indent: 0 } img { margin: 15px 0 } 三角形的场景很常见,打开一 ...

  4. 用css画出三角形

    看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...

  5. 用纯css画个三角形

    用纯css画个三角形以下是源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  6. 用css画图标

    css3的属性 transform(转换) 用途很广泛,功能也很强大,为了熟悉它的各种转换方式(平移 translate,旋转 rotate,扭曲 skew,放缩 scale),我做了一些平常常用的一 ...

  7. 如何用css画出三角形

    看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...

  8. 用css画出三角形【转】

    看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...

  9. css笔记——css 实现自定义按钮

    css实现自定义按钮的样式实际上很早就有了,只是会用的人不是很多,里面涉及到了最基础的css写法,在火狐中按钮还是会显示出来,这时需要将i标签的背景设置为白色,同时z-index设置比input高一些 ...

随机推荐

  1. 一道面试题关于js中添加动态属性

    js中数据类型包含基本数据类型和引用类型,基本类型包括:string.null.undefined.number.boolean.引用类型即是对象比如:array  .function以及自定义对象等 ...

  2. [SinGuLaRiTy] 分治题目复习

    [SInGuLaRiTy-1025] Copyrights (c) SinGuLaRiTy 2017. All Rights Reserved. [POJ 1905] 棍的膨胀 (Expanding ...

  3. C#中工厂模式的作用

    1.比如,主要用于对扩展性有要求的功能. 以简单工厂为例: 接口Fun有三个实现 class FunA FunB FunC工厂 class Fac {   public static Fun getF ...

  4. PerformCallback

    实现客户端,服务端异步通信的. 从客户端到服务端的通信:PerformCallback().PerformCallback就是从客户端到服务端的桥梁,它是单向的只能从客户端发起到服务端.在Perfor ...

  5. C++11 特性：成员函数引用限定 （Reference qualifier）

    学了这么多年C++今天拜读scott meyes的more effective cpp第一次看到这种写法... 引用限定可以让成员函数只能被左值对象调用或者只能被右值对象调用: #include &l ...

  6. 各种Helper代码

    1.读取XML文件 /// <summary> /// 读取XML配置文件类 /// </summary> public class XmlHelper { private s ...

  7. 牛客国庆集训day6 B Board （模拟标记思维或找规律或分块？？？）

    链接:https://www.nowcoder.com/acm/contest/206/B来源:牛客网 题目描述 恬恬有一个nx n的数组.她在用这个数组玩游戏: 开始时,数组中每一个元素都是0. 恬 ...

  8. PHPExcel类库的使用

    首先下载PHPEXCEL 下载地址:https://github.com/PHPOffice/PHPExcel 一.生成Excel <?php require "PHPExcel-1. ...

  9. 【2014年百度之星资格赛1001】Energy Conversion

    Problem Description 魔法师百小度也有遇到难题的时候—— 现在,百小度正在一个古老的石门面前,石门上有一段古老的魔法文字,读懂这种魔法文字需要耗费大量的能量和大量的脑力. 过了许久, ...

  10. Codeforces 316C2 棋盘模型

    Let's move from initial matrix to the bipartite graph. The matrix elements (i, j) for which i + j ar ...