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

周围四个扇形,和中间的小圆,全是能点击的。这就需要画扇形。百度了一下,有很多文章讲了如何生成扇形,最后我借鉴了一个最简单的实现方式,使用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. centOS系统将php升级到5.6 安装扩展

    在文章中,我们将展示在centOS系统下如果将php升级到5.6,之前通过yum来安装lamp环境,直接升级的话,提示没有更新包,也就是说默认情况下php5.3.3是最新 1.查看已经安装的php版本 ...

  2. 让函数的input、output更"函数化"

    前言 我们都知道函数的基本形式为:output f(input),且先按这种形式进行input与output的分析,我们的input与output可以有更好的设计方式,而我们的output是选择使用r ...

  3. P2596 [ZJOI2006]书架(splay)

    [题目链接] https://www.luogu.org/problemnew/show/P2596 平衡树,需支持五个操作: 1. 将某元素置顶:将元素旋到根,然后将左子树合并到该元素的后继 2. ...

  4. rest_framework 的验证,权限,频率

    回到顶部 快速实例 Quickstart 回到顶部 序列化 创建一个序列化类 简单使用 开发我们的Web API的第一件事是为我们的Web API提供一种将代码片段实例序列化和反序列化为诸如json之 ...

  5. sqlserver 事务日志

    预写式日志(Write-Ahead Logging (WAL)) --在数据写入到数据库之前,先写入到日志. 1.”Begin Tran”记录  -> 缓冲区 2. 日志             ...

  6. 基于wireshark抓包分析TCP的三次握手

    1. TCP的三次握手 在TCP/IP协议通讯过程中,采用三次握手建立连接,从而保证连接的安全可靠. 所有基于TCP的通信都需要以两台主机的握手开始.这个握手过程主要是希望能达到以下不同的目的.[1] ...

  7. Lonsdor K518ISE Key Programmer Review

    Lonsdor K518ISE key programmer is the latest version of Lonsdor, with wider vehicle coverage in key ...

  8. pthread_cond_wait函数的学习以及其他

    pthread_cond_wait() 前使用 while 讲解2009-10-27 9:33LINUX环境下多线程编程肯定会遇到需要条件变量的情况,此时必然要使用pthread_cond_wait( ...

  9. B P5 第十三届北航程序设计竞赛预赛

    https://buaacoding.cn/contest-ng/index.html#/188/problems 其实这题挺简单的. 注意到答案的大小最多是22 二分,check长度是mid的不同子 ...

  10. CAD安装失败怎样卸载CAD 2017?错误提示某些产品无法安装

    AUTODESK系列软件着实令人头疼,安装失败之后不能完全卸载!!!(比如maya,cad,3dsmax等).有时手动删除注册表重装之后还是会出现各种问题,每个版本的C++Runtime和.NET f ...