css实现三角形的原理是：当元素的宽高为0，边框(border)不为0时，四个角边框交界重叠处分45度角平分。讲得很别扭~~~上个图吧：
Html:
Css:
.triangle { border-color: red green blue pink; border-style: solid; border-width: 20px 20px 20px 20px; width: 0; height: 0;} 
那么，我们只有留下一条边框的时候会发现什么？
.triangle { border-color: red transparent transparent transparent; border-style: solid; border-width: 20px 20px 0px 20px; width: 0; height: 0;} 
怎样？出来了吧~~
同样道理，我们改成为向左向右的向左：
.triangle { border-color: transparent red transparent transparent; border-style: solid; border-width: 20px 20px 20px 0px; width: 0; height: 0;} 向右: .triangle { border-color: transparent transparent transparent red; border-style: solid; border-width: 20px 0px 20px 20px; width: 0; height: 0;} 大功造成！？ 慢，你用的是什么浏览器？如果用的是非IE6的话，恭喜你！下面我们用IE6（咬牙切齿ing...）
原来，IE6默认给了背景黑色~~
只有好用IE专有的东东了，解铃还需系铃人（~_~） 首先，css hack，用下划线"_"！_border-top-color: white;_border-bottom-color: white;然后用chroma filter ：
_filter: chroma(color =white);其实就是把不要的边过滤掉！ 还要加上
font-size: 0; line-height: 0;这样就彻底的去掉了黑色背景：
.triangle { border-color: transparent transparent transparent red; border-style: solid; border-width: 20px 0px 20px 20px; font-size: 0; line-height: 0; width: 0; height: 0; _border-top-color: white; _border-bottom-color: white; _filter: chroma( color =white);} 