如何用css制作一个能够兼容所有浏览器的三角形

利用css写三角形，兼容IE7

.arrow-up { 
 width:0px; 
 height:0px; 
 border-left:10px solid transparent; 
 border-right:10px solid transparent; 
 border-bottom:10px solid red; 
 font-size:0px; 
 line-height:0px;
 margin: 0 auto;
 } 

 .arrow-down { 
 width:0px; 
 height:0px; 
 border-left:10px solid transparent; 
 border-right:10px solid transparent; 
 border-top:10px solid blue; 
 font-size:0px; 
 line-height:0px; 
 } 
 
 .arrow-left { 
 width:0px; 
 height:0px; 
 border-bottom:10px solid transparent; 
 border-top:10px solid transparent; 
 border-right:10px solid #DC143C; 
 font-size:0px; 
 line-height:0px;
 } 
 .arrow-right { 
 width:0px; 
 height:0px; 
 border-bottom:10px solid transparent; 
 border-top:10px solid transparent; 
 border-left:10px solid #FF00FF; 
 font-size:0px; 
 line-height:0px; 
 }

效果如下：