css3--实现不同方向的三角形

<div class="up"></div>
<div class="right"></div>
<div class="down"></div>
<div class="left"></div>

//向上
.up{
	width:0;
    height:0;
	border-right:20px solid transparent;
	border-left:20px solid transparent;
	border-bottom:20px solid #4c5055;
}

//向右
.right{
    width:0;
    height:0;
    border-top:20px solid transparent;
    border-bottom:20px solid transparent;
    border-left:20px solid #4c5055;
}

//向下
.down{
	width:0;
	height:0;
	border-right:20px solid transparent;
	border-left:20px solid transparent;
	border-top:20px solid #4c5055;
}

//向左
.left{
    width:0;
    height:0;
    border-top:20px solid transparent;
    border-bottom:20px solid transparent;
    border-right:20px solid #4c5055;
}