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

详情参照：许你一城个人博客