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

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

    前言 今天去看了看论坛,发现有些人对于重载还是很有疑问的,像大多数人一样,貌似知道重载方法这回事儿, 但是具体怎么应用,或者用重载方法的好处,好像还是一知半解,模模糊糊.我们都知道,重载方法的定义,甚 ...

  2. ios swift 实现简单MVP模式

    在移动开发中,会用到各种架构,比如mvp,mvvm等,其目的就是为了让项目代码的可读性更好,减轻在android(activity) ios(controller)中的大量代码问题.接下来就开始我们的 ...

  3. Orcale创建函数（function）

    Oraclec创建函数的语法规则 create or replace function  函数名 (参数名1 参数类型,参数名2 参数类型)  return number  is Result num ...

  4. USACO 2.1.3 Sorting a Three-Valued Sequence（sort3）

    这道题就是给出由123三个值的一个数字序列,然后让你把这个序列升序排序,求最小的交换次数.注意这里可以不是相邻交换. 刚开始一看题的时候,还以为t=a a=b b=t那种水题呢,然后发现不是水题.. ...

  5. [USACO08OCT]牧场散步Pasture Walking BZOJ1602 LCA

    题目描述 The N cows (2 <= N <= 1,000) conveniently numbered 1..N are grazing among the N pastures ...

  6. kuangbin专题十六 KMP&&扩展KMP HDU2087 剪花布条

    一块花布条,里面有些图案,另有一块直接可用的小饰条,里面也有一些图案.对于给定的花布条和小饰条,计算一下能从花布条中尽可能剪出几块小饰条来呢? Input输入中含有一些数据,分别是成对出现的花布条和小 ...

  7. linux服务器后台运行程序

    让程序脱离终端单独运行 nohub ... & 重新连接ssh后,ps ux 可以查看所有后台程序

  8. poj2253青蛙（可到达路径的单次跳跃最短距离）

    Frogger Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 55388   Accepted: 17455 Descrip ...

  9. Go语言基础之8--面向对象编程1之结构体（struct）

    一.结构体详解 1.1 声明和定义 1.Go中面向对象是通过struct来实现的, struct是用户自定义的类型 2.Go 语言中数组可以存储同一类型的数据,但在结构体中我们可以为不同项定义不同的数 ...

  10. 3.Servlet(二)

    1.Servlet应用开发接口 对Servlet应用开发接口及功能的掌握,决定了是否能做好Servlet开发工作. GenericServlet抽象类 HttpServlet抽象类 2.Servlet ...