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

周围四个扇形，和中间的小圆，全是能点击的。这就需要画扇形。百度了一下，有很多文章讲了如何生成扇形，最后我借鉴了一个最简单的实现方式，使用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. （原创）Codeforces Round #550 (Div. 3) D. Equalize Them All

    D. Equalize Them All time limit per test 2 seconds memory limit per test 256 megabytes input standar ...

  2. Oracle PL/SQL编程语法

    --plsql块结构,计算a,b的和 declare a ; b ; c int; begin c:=a+b; dbms_output.put_line(c); end; --%type数据类型,输出 ...

  3. poj2406 Power Strings（kmp）

    poj2406 Power Strings(kmp) 给出一个字符串,问这个字符串是一个字符串重复几次.要求最大化重复次数. 若当前字符串为S,用kmp匹配'\0'+S和S即可. #include & ...

  4. 9.27下午考试(Nescafé 29杯模拟赛)

    140pts(100+30+10)Rank3 前几天还考了一场,AK,没什么好总结的,所以就没写博客. 炸: T2,模拟退火突然不会了,写个状压dp,排序边的时候sort的N而不是M. 这个坑经常出! ...

  5. [ZJOI2009]函数 BZOJ1432

    题目描述 有n 个连续函数fi (x),其中1 ≤ i ≤ n.对于任何两个函数fi (x) 和fj (x),(i != j),恰好存在一个x 使得fi (x) = fj (x),并且存在无穷多的x ...

  6. [CEOI2008]order BZOJ1391 网络流

    题目描述 有N个工作,M种机器,每种机器你可以租或者买过来. 每个工作包括若干道工序,每道工序需要某种机器来完成,你可以通过购买或租用机器来完成. 现在给出这些参数,求最大利润 输入输出格式 输入格式 ...

  7. Large Writes in Exadata FlashCache

    在 Exadata存储管理软件12.2.1.1.0中,flashcache开始支持复杂排序和大量的hash join产生的临时数据写入flashcache中,而不是直接写入SAS磁盘的tempfile ...

  8. 8. sql 片段

    sql 片段: <sql id="columnBase"> `id`, `title`, `author_id` as authorId, `state`, `feat ...

  9. 【记录一下】从0到1 我的python开发之路

    请设计实现一个商城系统,商城主要提供两个功能:商品管理.会员管理. 商品管理: - 查看商品列表 - 根据关键字搜索指定商品 - 录入商品 会员管理:[无需开发,如选择则提示此功能不可用,正在开发中, ...

  10. 南昌大学航天杯第二届程序设计竞赛校赛网络同步赛 I

    链接:https://www.nowcoder.com/acm/contest/122/I来源:牛客网 题目描述 小q最近在做一个项目,其中涉及到了一个计时器的使用,但是笨笨的小q却犯难了,他想请你帮 ...