“三角边”的那点事儿
“三角边”，我想应该很多人都知道，而且如果运用熟练，很多以前我们认为只能用图片来做的东西可以通过它来实现。因此适当和熟练地使用它可以起到减少页面中图片http链接，增强页面性能的作用。本文要讲一点三角边的实际用途以及利用它来实现的一些特别的效果。希望对有需要的朋友一些帮助。
“三角边”-- 故名思意，即可以模拟三角。先看看下面的例子：
没错，别怀疑你的眼睛，上面的html和css里没有任何图片，所有三角效果都是css直接模拟出来的，而且兼容所有浏览器。
其实，原理很简单，给一个最简单的例子就明白了，
css样式：
.border {
height: 0;
width: 0;
border-width: 20px;
border-style: solid;
border-color: red blue black green;
}
html ：
<div class="border"></div>
这段简单的代码输出结果为：
呵呵，是不是已经看到了“三角形”冒出来的端倪了。没错。其实DOM元素的border相接的地方是以三角的方式衔接的。所以我们才可以利用这种特性完成许多特别的事。
到这一步了，我们把需要留下来的三角留下，把不需要的border透明掉，不就可以呈现出三角形了么。对的，我们让不需要的border的border-color为transparent即可。
这里还需要注意一个小问题，就是ie6下面如果transparent的border为solid的话，会出现问题的。所以，我们为了将就ie6这个娇生惯养的家伙，统一让transparent的border-style为dashed或者dotted都可以。
比如，就用上面的代码，我们想保留下面黑色的三角的话，让其余三边透明，并且dashed或dotted即可。
css：
.border-triangle {
height: 0;
width: 0;
border-width: 20px;
border-style: dashed dashed solid dashed;
border-color: transparent transparent black transparent;
}
html:
<div class="border-triangle"></div>
输出结果就变成了：
好了，三角边教程差不多了，本来就是个很简单的原理，只要用过一次相信都会掌握的。再结合其他的样式就可以作出你想要的“纯css三角”或者“纯css梯形”。
【tip】
这里不得不再啰嗦一下，由于ie6太不乖了，所以如果需要用到height为0或接近0的时候，请都把它的font-size设为0，并且overfolw：hidden掉，不然你在ie6下会发现总有缝隙的。
【献礼】
下面是一个js写的焦点图，也是周末时一时兴起做的，它特殊的一点就是用到了“三角边”来做图片切换的效果，做到了滚轴的效果。目前本人好像还没发现有哪个网站用的是这种效果的焦点图。。。
