CSS绘制三角形（含代码）

（1）
我们先来看看下面这段代码：
div#tr1{
width: 0px;
height: 0px;
border: 30px solid #F00;
}
想想这会是怎样一个图形？直接上图，看下面：
 


对，就是一个正方形。如果你不理解，说明你对css中的盒子模型还不了解，需要去补充一下这方面的知识。
（2）继续，上面（1）的代码也可以写成如下形式，运行结果是一样的，我就不上图了。
div#tr1{
width: 0px;
height: 0px;
border-top: 30px solid #F00;
border-right: 30px solid #F00;
border-bottom: 30px solid #F00;
border-left: 30px solid #F00;
}
（3）我们把（2）中的上、右、下、左的边框颜色改成四中不同的颜色，代码如下：
div#tr3{
width: 0px;
height: 0px;
border-top: 30px solid #EE7E80;
border-right: 30px solid #FDCE5F;
border-bottom: 30px solid #7DC3ED;
border-left: 30px solid #A6A8E9;
}
如下图：
 


（4）到这里，我们想一下，我们如果要一个三角形，只要把其他三边变成透明不就可以了吗。对的，就是这样。因为在css中颜色是可以设置为：transparent的。
div#tr4{
width: 0px;
height: 0px;
border-top: 30px solid #EE7E80;
border-right: 30px solid transparent;
border-bottom: 30px solid transparent;
border-left: 30px solid transparent;
}
如下图：
 


（5）再补充一点，其实在（4）中除了把其他三边设置为transparent，还可以把其他三边设置为背景色，如在本文中背景色为白色，那么在（4）中也可以这样，如下：
div#tr4{
width: 0px;
height: 0px;
border-top: 30px solid #EE7E80;
border-right: 30px solid #FFF;
border-bottom: 30px solid #FFF;
border-left: 30px solid #FFF;
}
 (6)代码下载地址：http://download.csdn.net/detail/bide_tootight/9809129
详情参照：许你一城个人博客