使用css3制作正方形、三角形、扇形和饼状图
2012-12-27 10:30
537 查看
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;
}
显示效果:
![](http://images.cnitblog.com/blog/439599/201212/27101831-e48b6f4461714c0e863905ceaff12f31.jpg)
由图可见,四个三角形指向不同方向。
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;
}
效果:
![](http://images.cnitblog.com/blog/439599/201212/27102327-1c63701c84c5428386f8810103049b29.jpg)
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;
}
效果:
![](http://images.cnitblog.com/blog/439599/201212/27102757-c00e9655077d43798336bea1ad0721f6.jpg)
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;
}
效果:
如果将盒容器的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;
}
显示效果:
![](http://images.cnitblog.com/blog/439599/201212/27101831-e48b6f4461714c0e863905ceaff12f31.jpg)
由图可见,四个三角形指向不同方向。
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;
}
效果:
![](http://images.cnitblog.com/blog/439599/201212/27102327-1c63701c84c5428386f8810103049b29.jpg)
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;
}
效果:
![](http://images.cnitblog.com/blog/439599/201212/27102757-c00e9655077d43798336bea1ad0721f6.jpg)
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;
}
效果:
![](http://images.cnitblog.com/blog/439599/201212/27102722-c36280afdc3d4c5bb87cad9701a57ab1.jpg)
相关文章推荐
- BonBon - 使用 CSS3 制作甜美的糖果按钮
- 在CSS3中制作小三角形效果代码
- HTML5+CSS3+JS学习笔记-8-使用JS及函数来制作表格
- 使用CSS3制作酷炫仿苹果複選框
- 使用CSS3制作各种形状的图形
- 15个使用 CSS3 制作的漂亮作品展示网站
- OpenGL ES 2.0 -- 制作 3D 彩色旋转三角形 - 顶点着色器 片元着色器 使用详解
- 使用 CSS3 & jQuery 制作漂亮的书签动画
- 使用CSS3 制作一个material-design 风格登录界面
- 使用transform和transition制作CSS3动画
- 使用CSS3打造的精美特效盘点,部分有中文制作教程及源码
- 30 个使用 CSS3 制作网页按钮的教程 30 Examples of CSS3 Buttons Tutorials
- 【原创】使用纯CSS3制作一个无限循环的动画
- [置顶] css3 befor after 简单使用 制作时尚焦点图相框
- 使用CSS3制作Loading动画
- 使用 HTML5、CSS3 和 MathML 在 EPUB 3 中制作版式丰富的出版物
- 使用CSS3制作立体效果的导航菜单
- 使用CSS3 BACKFACE-VISIBILITY属性制作翻转动画效果
- CSS3简单动画效果与使用列表制作菜单