css实现三角形及应用示例

猫性男孩

css实现三角形，网上讲了很多，但我发现一般都是三角向上或者向下的，向左向右这两方向似乎讲得很少，本人试了一下，发现原来在IE下很难搞~~(万恶的IE)...

css实现三角形的原理是：当元素的宽高为0，边框(border)不为0时，四个角边框交界重叠处分45度角平分。讲得很别扭~~~上个图吧：

Html:

[code=Xml width=600px]<div class="triangle"/></div>[/code]
css:
[code=Css width=600px].triangle {               
       border-color: red green blue pink;
       border-style: solid;
       border-width: 20px 20px 20px 20px;
       width: 0;
       height: 0;
}[/code]

那么，我们只有留下一条边框的时候会发现什么？
[code=Xml width=600px].triangle {              
       border-color: red transparent transparent transparent;
       border-style: solid;
       border-width: 20px 20px 0px 20px;
       width: 0;
       height: 0;
}[/code]

怎样？出来了吧~~
同样道理，我们改成为向左向右的

向左：

[code=Xml width=600px].triangle {              
      border-color: transparent red transparent transparent;
      border-style: solid;
      border-width: 20px 20px 20px 0px;
      width: 0;
      height: 0;
}[/code]
向右:
[code=Xml width=600px].triangle {               
     border-color: transparent transparent transparent red;
     border-style: solid;
     border-width: 20px 0px 20px 20px;
     width: 0;
     height: 0;
}[/code]
大功造成！？ 慢，你用的是什么浏览器？如果用的是非IE6的话，恭喜你！下面我们用IE6（咬牙切齿ing...）

原来，IE6默认给了背景黑色~~
只有好用IE专有的东东了，解铃还需系铃人（~_~）
首先，css hack，用下划线"_"！

1	_border-top-color: white;

[backcolor=rgb(248, 248, 248) !important]

2	_border-bottom-color: white;

然后用chroma filter ：

1	_filter: chroma(color =white);

其实就是把不要的边过滤掉！
还要加上

1	font-size: 0;  line-height: 0;

这样就彻底的去掉了黑色背景：
[backcolor=rgb(248, 248, 248) !important][color=rgb(160, 160, 160) !important]view source
[color=rgb(160, 160, 160) !important]print[color=rgb(160, 160, 160) !important]?

01	.triangle {

[backcolor=rgb(248, 248, 248) !important]

02	border-color: transparent  transparent transparent red;

03	border-style: solid;

[backcolor=rgb(248, 248, 248) !important]

04	border-width: 20px 0px 20px 20px;

05	font-size: 0;

[backcolor=rgb(248, 248, 248) !important]

06	line-height: 0;

07

width: 0;

[backcolor=rgb(248, 248, 248) !important]

08	height: 0;

09	_border-top-color: white;

[backcolor=rgb(248, 248, 248) !important]

10	_border-bottom-color: white;

11	_filter: chroma( color =white);

[backcolor=rgb(248, 248, 248) !important]

12

}