CSS画出边框三角形

.tri-up{
width: 0;
height:0;
border-left:20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid red;  }
.tri-left{
width: 0;
height:0;
border-top:20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid red;}
.tri-right{
width: 0;
height:0;
border-top:20px solid transparent;
border-bottom: 20px solid transparent;
border-right: 20px solid red;}
.tri-down{
width: 0;
height:0;
border-left:20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid red; 
}