使用css3制作正方形、三角形、扇形和饼状图
1.利用边框制作正方形
如果将盒容器的width和height设置为0,并为每条边设置一个较粗的width值和彼此不同的颜色,最终会得到四个被拼接在一起三角形,它们分别指向不同的颜色。
html代码:<div id="square">11</div>
css3代码:
#square{
width:0;
height:0;
border-width:100px;
border-style:solid;
border-color: red blue green yellow;
line-height:99em;
overflow:hidden;
cursor:pointer;
margin: 30px auto;
}
显示效果:
由图可见,四个三角形指向不同方向。
2.当我们对四个三角形的其中三个设置颜色为透明即transparent,即可得到一个三角形
html:
<div id="triangle">11</div>
css:
#triangle{
width:0;
height:0;
border-width:100px;
border-style:solid;
border-color:red transparent transparent transparent;
line-height:99em;
overflow:hidden;
cursor:pointer;
margin: 30px auto;
}
效果:
3.大家应该知道css3中引入了圆角属性(border-radius),一旦设置这个值,边框即会出现圆角。同样,我们对正方形设置圆角,即可得到饼状图
html:<div id="circle">11</div>
css:
#circle{
width:0;
height:0;
border-radius:100px;
border-width:100px;
border-style:solid;
border-color: red blue green yellow;
line-height:99em;
overflow:hidden;
cursor:pointer;
margin: 30px auto;
}
效果:
4.同样我们对其中三个边框设置透明色即可得到扇形
html:<div id="fan">11</div>
css:
#fan{
width:0;
height:0;
border-radius:100px;
border-width:100px;
border-style:solid;
border-color:red transparent transparent transparent;
line-height:99em;
overflow:hidden;
cursor:pointer;
margin: 30px auto;
}
效果:
转载于:https://www.cnblogs.com/qduanlu/archive/2012/12/27/2835245.html
使用css3制作正方形、三角形、扇形和饼状图相关推荐
- iOS 中饼状图的自定义绘制
前几天有一个需求是制作一个统计工资的饼状图,但是和一般的饼状图不同的是要求该饼状图中心需要有两条文字,功能需求就是这样,先上一张效果图: 因为咱们的饼状图本身只是一个View ,在调用的时候一定是在一 ...
- axure画扇形_如何利用axure制作一个动态的饼状图
话不多少,先放图! 饼状图 首先,我们来分析一下动态效果 1.鼠标悬浮饼状块颜色发生了改变,且尺寸发生了变化 2.鼠标移入不同的块内,提示框随着鼠标的移动而移动,且提示框内的文字发生了变化. 然 ...
- Android自定义View之扇形饼状图
前言:继上次写了自定义圆形进度条后,今天给大家带来自定义扇形饼状图.先上效果图: 是不是很炫?看上去还有点立体感.下面带大家一起来瞧一瞧吧. 一.定义成员变量,重写构造方法 看着这个效果图,我们可以想 ...
- canvas制作柱形图/折线图/饼状图,Konva写动态饼状图
制作饼状图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- Python使用matplotlib设置pandas绘制的饼状图扇形标签
2021年全国高校Python课程高级研修班(线上) 中国大学MOOC"Python程序设计基础"第4次开课 推荐图书: <Python程序设计(第3版)>,(ISBN ...
- echarts 饼状图 (数据为0或很小的扇形显示问题、扇形间隔)
series: [{name: '概况',type: 'pie',label:{formatter: '{b}({d}%)',color:'#555555'},radius: ['30%', '50% ...
- Angular2组件与Echarts饼状图交互之饼图制作
一.前言 1.基于ng4项目 2.组件包括:根组件app和饼状图组件echart 二.饼状图开发过程 1.添加插件 echart cnpm install echarts --save 2.创建组件 ...
- Superset 制作 地图 柱状图 饼状图
文章目录 制作地图 制作柱状图 制作饼状图 制作地图 1)创建 Chart 2)配置 Chart 3)结果图 制作柱状图 1)创建 Chart 2)配置 Chart 3)结果图 制作饼状图 1)创建 ...
- 利用Excel制作问卷的饼状图
在调研过程中,调研方法有多种:问卷法,访谈法等,而当我们采用问卷法的时候,需要进行统计数据,当然如果选择例如问卷星等网上问卷的话,可以省去自己制作数据饼状图或条形图等麻烦,但因为一些原因,必须使用纸质 ...
最新文章
- PHP自动加载类—__autoload()和spl_autoload_register()
- SNMP 协议 OID的使用
- ifconfig 命令介绍
- python闯关_99题--Python闯关
- windows组件向导里没有internet 信息服务(iis) 的解决办法
- Swift - 操作表(UIActionSheel)的用法,也叫底部警告框
- 整理vim格式回车变成空两格
- 最实诚导师招生简章“火”了:目前只有不太充足的经费,但绝不克扣研究生补贴!...
- 网络处理器(NP)与图形处理器(GPU)
- 【手机主题字体】暗恋笔记ttf
- 微软Windows字体被诉侵权?我们来聊聊有关网站侵权被诉的那些事。
- 游戏出海Get,TikTok联手Zynga推出一款基于HTML5打造的手机游戏
- JSCRIPT如何调试
- 怎么用计算机弹奏忘羡,《忘羡,钢琴谱》魔道祖师 岚之调(五线谱 钢琴曲 指法)-弹吧|蛐蛐钢琴网...
- 在Windows 7中使用AppLocker限制对程序的访问
- 【小工具类】将一个十进制数转化成二进制/四进制/八进制/16进制
- 埃及分数拆分——IDA*
- AD账号导入--dsadd user
- 50天50个页面-DAY1-Expanding Card
- 一个小白轻松月入上万块的线上冷门项目
热门文章
- 一文带你认识:Liunx的历史
- centos7 vnc oracle,Centos7远程桌面的安装与vnc/vnc-server的设置
- 不错php文件缓存类,一个不错的PHP文件页面缓存类
- android多行文本框hint居中,在安卓等移动浏览器中placeholder中的文字不垂直居中问题...
- 基于局部均方差相关信息的图像去噪及其在实时磨皮美容算法中的应用
- 有关camshift的知识点
- 【AI-1000问】为什么LeNet5倒数第二个全连接层维度为84?
- 【AI-1000问】人脸的4个方向,你还分的清楚吗?
- 全球及中国有机肥料行业投资价值与营销品牌战略报告2022版
- 全球及中国固态锂电池行业需求量预测及投资规模战略报告2021-2027年