码迷,mamicode.com
首页 > Web开发 > 详细

纯css实现三角形

时间:2014-07-19 11:21:13      阅读:258      评论:0      收藏:0      [点我收藏+]

标签:style   blog   color   使用   strong   width   

在设计界面的时候,通常需要三角形的图标,一般做法是用图片,其实也可以使用css来实现。如下:


向上的三角形

 

向右的三角形

 

向下的三角形

 

向左的三角形

 

实现它们的css分别是:

1 .top{
2     width: 0;
3     height: 0;
4     border-color: transparent transparent #333 transparent;
5     border-width: 6px;
6     border-style: solid;
7 }
1 .right {
2     width: 0;
3     height: 0;
4     border-color: transparent transparent transparent #333;
5     border-width: 6px;
6     border-style: solid;
7 }
1 .down {
2     width: 0;
3     height: 0;
4     border-color: #333 transparent transparent transparent;
5     border-width: 6px;
6     border-style: solid;
7 }
1 .left {
2     width: 0;
3     height: 0;
4     border-color: transparent #333 transparent transparent;
5     border-width: 6px;
6     border-style: solid;
7 }

其中用到的border-color:transparent是只有在奇葩的IE6下才支持,所以可以放心使用

纯css实现三角形,布布扣,bubuko.com

纯css实现三角形

标签:style   blog   color   使用   strong   width   

原文地址:http://www.cnblogs.com/dacuotecuo/p/3854501.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!