用CSS绘制三角形，其实就是矩形的一条可见边。
首先我们来看一般的矩形。
<style type="text/css">
.box{
height: 30px;
width: 30px;
border: 20px solid transparent;
border-top: 20px solid red;
border-right: 20px solid purple;
border-bottom: 20px solid green;
border-left:20px solid blue;
}
</style>
<body>
<div class="box"></div>
</body>
我们给了矩形四条边不同的颜色，如下图所示。可以看出，在矩形角部的重叠部分，相邻两条边各分了角的一半，每条边的实际上色部分为一个梯形。
接着我们把矩形的大小设为0，让矩形只有边框。
<style type="text/css">
.box{
height: 0px;
width: 0px;
border: 20px solid transparent;
border-top: 20px solid red;
border-right: 20px solid purple;
border-bottom: 20px solid green;
border-left:20px solid blue;
}
</style>
<body>
<div class="box"></div>
</body>
我们发现每条边的实际着色为以每条边为底的三角形。由此我们可以想到，当只有一条边着色，另外三条边透明时，我们就可以得到一个三角形。于是我们把边的颜色设为透明，再对一条边进行着色，通过改变边的宽度，可以得到任意形状的三角形。
<style type="text/css">
.box{
height: 0px;
width: 0px;
border: 20px solid transparent;
border-bottom:30px solid red;
}
</style>
<body>
<div class="box"></div>
</body>