通过设置div的border属性，来实现！
将div的height和width属性分别设置为0px，将4边的border值设置为一样的宽度，通过调节边框的颜色课看到效果。
<style> div{height: 0px;width: 0px; border-top: 20px solid red; border-left: 20px solid blue; border-right: 20px solid gray; border-bottom: 20px solid pink; } </style> </head> <body> <div></div> </body>
即可得到一个由4个三角形组成的正方形。如下图：
接下去，只要设置将另外3边的颜色去掉就可以得到三角形，此时设置border-color为transparent，此时就能得到三角形。
div{height: 0px;width: 0px;
border-top: 20px solid red;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid transparent;
}
得到如下图：
另外，transparent为颜色值，等同于rgba(0,0,0,0)，透明度为0。然而在IE6中不支持，会默认显示如下图：
原文：http://www.cnblogs.com/hcy1996/p/5882914.html