CSS写三角形

用纯CSS写三角形的样式，实现如下效果：

代码如下：

html：

<div class="upper"></div>//上
<div class="right"></div>//右
<div class="down"></div>//下
<div class="left"></div>//左

css：

.upper{//上
	width: 0px;
	height: 0px;
	border-width: 0 30px 30px 30px;
	border-style: solid;
	border-color: transparent transparent red transparent;
}
.right{//右
	width: 0;
	height: 0;
	border-width: 30px 0px 30px 30px;
	border-style: solid;
	border-color: transparent transparent transparent blue;
}
.down{//下
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 30px 30px 0 30px;
	border-color: black transparent transparent transparent;
}
.left{//左
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 30px 30px 30px 0px;
	border-color: transparent yellowgreen transparent transparent;
}

思路解析：

三角形的呈现主要是border来实现的。
1、一个正方形， 有宽、高、背景色， 是这样的：

<style>
	.triangle{
		width: 100px;
		height: 100px;
		background-color: red;
	}
</style>
//html
<div class="triangle"></div>

2、一个正方形 无宽、高、背景色，但是有边框， 是这样的：

<style>
	.triangle1{
	  	width: 0;
	    height: 0;
	    border-top: 100px solid black;
	    border-right: 100px solid palegreen;
	    border-bottom: 100px solid yellow;
	    border-left: 100px solid red;
	}
</style>
<div class="triangle1"></div>

3、显示一个左边框，其它边框透明，有宽、高、背景色，是这样的：

<style>
	.triangle2{
	    width:100px;
	    height:100px;
	    background-color: #333;
	    border-width:30px 0 30px 30px;
	    border-style:solid;
	    border-color:transparent transparent transparent red;
  	}
</style>
<div class="triangle2"></div>

4、没有 宽、高、背景色，有边框，是这样的：

<style>
	.triangle3{
	    width:0px;
	    height:0px;
	    border-width:30px 0 30px 30px;
	    border-style:solid;
	    border-color:transparent transparent transparent red;
   	}
</style>
<div class="triangle3"></div>

综上所诉：
用css绘画出三角形，如果三角形的方向想朝哪边，那么，边框的宽度是：想朝向的方向是0px，其他是有宽度的。边框颜色是：其他颜色是透明的，朝向的反方向有颜色。
比如绘画一个向上的三角形：
border-width：0 30px 30px 30px；
border-color: transparent transparent red transparent；