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

周围四个扇形，和中间的小圆，全是能点击的。这就需要画扇形。百度了一下，有很多文章讲了如何生成扇形，最后我借鉴了一个最简单的实现方式，使用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. day04-Linux系统中用户控制及文件权限管理方法

    一. useradd指令新建一个用户包含以下文件 1. 用户信息文件:less   /etc/passwd                                                ...

  2. P2948 [USACO09OPEN]滑雪课Ski Lessons

    题意:Bessie去滑雪,限时T,滑雪场有S节课 每节课开始于$m_i$,长度为$l_i$,可以将Bessie的能力值变成$a_i$(注意是变成不是增加) 有n个滑雪坡,去滑雪需要$c_i$的能力,并 ...

  3. 线段树【洛谷P2894】 [USACO08FEB]酒店Hotel

    P2894 [USACO08FEB]酒店Hotel 参考样例,第一行输入n,m ,n代表有n个房间,编号为1---n,开始都为空房,m表示以下有m行操作,以下 每行先输入一个数 i ,表示一种操作: ...

  4. log4j配置文件及java调用 每个级别输出到不同的文件

    #配置根Logger log4j.rootLogger = DEBUG , RollingFile,CONSOLE #文件大小达到一定尺寸的时候创建一个新的文件 log4j.appender.Roll ...

  5. NSFileManager在初始化文件的时候一不留神就进入陷阱

    今天调试一个程序,内容是在手机一个本地路径生成一个缓存文件,在生成本地路径的时候犯了一个错误,本着求原因的精神调试了2个小时,终于找到原因了 刚开始断点调试的时候,执行到第13行,这里死活不给写入数据 ...

  6. mybatis逆向工程工具

    mybatis逆向工程 package com.cxy; import java.io.File; import java.util.*; import org.mybatis.generator.a ...

  7. springcloud系列七 整合slueth,zipkin 分布式链路调用系统:

    首先在代码里面引入依赖: <dependency> <groupId>org.springframework.cloud</groupId> <artifac ...

  8. svg 日常操作

    创建svg 文件 <svg> </svg> 详解viewBox  SVG Viewport.View Box和preserveAspectRatio 形状  标签内的值可以是百 ...

  9. chafen

    //f(u)>=f(v)+w //求最大值 跑最短路 v->u -w //求最小值 跑最长路 u->v w

  10. hau1021 Fibonacci Again（递归）

    Fibonacci Again Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)T ...