LOGO OA教程 ERP教程 模切知识交流 PMS教程 CRM教程 开发文档 其他文档  
 
网站管理员

使用css3制作正方形、三角形、扇形和饼状图

Ccoffee
2016年3月28日 11:31 本文热度 9871

使用css3制作正方形、三角形、扇形和饼状图

1.利用边框制作正方形

如果将盒容器的width和height设置为0,并为每条边设置一个较粗的width值和彼此不同的颜色,最终会得到四个被拼接在一起三角形,它们分别指向不同的颜色。

html代码:

11

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:

11

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:

11

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:

11

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;

}

效果:


该文章在 2016/3/28 11:32:13 编辑过
关键字查询
相关文章
正在查询...
点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。
点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理,结合码头的业务特点,围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体,是物流码头及其他港口类企业的高效ERP管理信息系统。
点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。
点晴免费OA是一款软件和通用服务都免费,不限功能、不限时间、不限用户的免费OA协同办公管理系统。
Copyright 2010-2024 ClickSun All Rights Reserved