纯 Css 绘制扇形
阅读此文需具备基本数学知识:圆心角、弧度制、三角函数。
为实现如下效果呕心沥血:
当然你可以拥抱 Svg...在此分享如何纯 Css 打造圆环进度条,只需三步!
此物乃 2 + 1 夹心饼干,蓝绿色部分为果酱。显而易见饼干为两个削成了圆形的 div ,我们重点演示果酱是怎么制作的:
如图所示,大扇形由 6 个小扇形构成,每一小扇形占整个圆饼的 1/15 ,大扇形占整个圆饼的 6/15 。我们只需构造一个扇形单元,将其复制 6 份后旋转相应角度连接至一起即可。
如何构造扇形?用三角形伪装...
三角形的宽高如何计算?假定圆半径 $radius 为 100px,等分数 $count 为 15。则小扇形的圆心角为 360deg / 15 ,三角形的高为 100px,宽为 2 × 100px × tan(360deg / 15 / 2) 。其中 360deg / 15 / 2 转化弧度制为 PI / 15 (PI == 360deg / 2)。
span {width: 0;height: 0;border: $radius solid transparent;$borderWidth: tan(pi() / $count) * $radius;border-left-width: $borderWidth;border-right-width: $borderWidth;
}
数学欠佳的同学请自行科普...
对于 $count 为 1 或 2 的情况需特殊处理,因为 tan(PI) 及 tan(PI / 2) 为无穷值,不了解的同学请研究正切函数图像:
相关代码(其中 $diameter = 2 × $radius 为圆直径):
span {@if $count == 1 {width: $diameter;height: $diameter;} @else if $count == 2 {width: $diameter;height: $radius;} @else {width: 0;height: 0;border: $radius solid transparent;$borderWidth: tan(pi() / $count) * $radius;border-left-width: $borderWidth;border-right-width: $borderWidth;}
}
最后,复制并逐一旋转扇形单元:
@for $index from 0 to $count {span:nth-child(#{$index + 1}) {$transform: translate(-50%, 0) rotate(360deg / $count / 2 + 360deg * $index / $count);$origin: if($count == 2, bottom, center);-webkit-transform: $transform;transform: $transform;-webkit-transform-origin: $origin;transform-origin: $origin;}
}
果酱制作完毕,其它点缀请自行添加喽...本例完整代码在此。
2017/11/14 续更
由于本例引入了三角函数等数学运算,使用 Sass 预编译。未安装 Sass 的同学可下载经编译的 源码 开启 sector.html 查看效果。
安装 Sass 请参考 https://segmentfault.com/a/11... 文章末尾的安装教程。
本例调试方法:
cd sector
sass --watch style.scss:style.css --debug-info
纯 Css 绘制扇形相关推荐
- CSS 魔法系列:纯 CSS 绘制基本图形(圆、椭圆等)
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
- html css右下角三角形,纯CSS绘制三角形(各种角度)
CSS/HTML 的 纯CSS绘制三角形(各种角度) 我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 C ...
- CSS 魔法系列:纯 CSS 绘制各种图形《系列五》
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
- html div三角形,【div】纯CSS绘制三角形
原标题:[div]纯CSS绘制三角形 我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使 ...
- 纯css绘制齿轮加载动画
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 目录 前言 一.效果图 二.步骤 1.html部分 2.css部分 前言 纯css绘制齿轮加载动画. 无需使用任何图片及素材. 提示: ...
- 纯CSS 绘制三角形气泡框
1.用纯css绘制带三角型的气泡框,不适合用图片 2.绘制的原理:当width和height均为0时,bord不为0时,边界交换处以45度角平分. 例子:先画一个三角吧 .dr{width:0px; ...
- 纯css绘制的疲惫表情包
下载地址 纯css绘制的疲惫表情包网页代码 dd:
- css让图片显示圆角 纯CSS绘制漂亮的圆形图案效果
css让图片显示圆角 样式: border-radius:5px 15px 20px 25px;顺序依次是上右下左 纯CSS绘制漂亮的圆形图案效果 .circle { border-radius: 5 ...
- 28.纯 CSS 绘制一个世界上不存在的彭罗斯三角形
28.纯 CSS 绘制一个世界上不存在的彭罗斯三角形 原文地址:https://segmentfault.com/a/1190000014946883 感想:三个平面图形旋转 HTML代码: < ...
最新文章
- php 一次性替换多个关键词
- Android关于notification的在不同API下的用法说明
- php写实体类,自动生成实体类(方式一)
- SAP OData编程指南
- mysql如何下载msi_2、Windows下MySQL数据库下载与安装详细教程 MSI方式
- 百度google关键字优化的小技巧
- 《哔哩哔哩助手》助你快速成为B站老司机
- Ps如何把背景图片拉长并不变形!
- 微信公众平台后台接入简明指南
- 实例分割: 一文读懂 E2EC (CVPR 2022)
- 随想002:设计规范
- 高德地图H5 定位失败报错 geolocation time out. Get ipLocation failed解决方案
- js动态添加修改删除元素
- 怎么远程计算机控制系统,电脑远程控制怎么弄 电脑进行远程控制详细教程
- 计算机二级c语言考上机考试吗,计算机二级c语言上机考试操作步骤及流程
- 蓝宝石rx580怎么超频_超频测试:提升8%
- 基于springboot+vue+MySQL的电影院会员管理系统
- Linux服务器CPU使用率过高排查与解决思路
- 机器学习笔记之狄利克雷过程(四)从概率图角度认识狄利克雷过程
- Linux Socket网络编程UDP、TCP 阻塞与非阻塞 断线重连机制