使用css绘制一个等腰直角三角形

几句简单的css代码，就可以绘制出一个数学三角形。简单，实用，是替换三角图片的不二选择，当然IE6除外。css 三角形，已不新鲜，随处可见，它巧妙地运用了css里面的一个小技巧。

如果一张网页中的某些地方需要使用一些三角图片，正常思维都是做张图，而且需要两张，因为一般都是下拉菜单的效果，需要有个hover的样式，也许箭头是反的。不管，正的反的，它都需要一张图片。

那有没有更好的办法呢，毕竟要用一张，或者图片来解决这么一个小问题，是不是有点太浪费资源了，于是，各大论坛里就有一个css 三角形的解决样式。用到的只需css的一个属性，那就是border。

先看一下正常盒子模型，添加边框的效果：

我们更改下左边框和右边框的颜色，再看看效果：

我们再改变下盒子的宽度和高度：

nice! 出现了4个三角形了，然后我们如果需要左边那个css 三角形，有两种方法：

1、将border的top、right、bottom设置成背景色（IE6效果不错，看不出问题）；

2、将border的top、right、bottom设置成透明色同时设置background为transparent（IE6,有问题了，是不支持border-color: transparent的）。

最终效果：

分别改变下left、right、bottom、top四个边框的颜色，就可以得到4个不同方向的css 三角形了，东西很简单，但想到用border边框来制作css 三角形箭头，确是相当地巧妙，最后贴下代码。