使用CSS实现实心、带框及空心三角形

 <div class="up"></div> <!--向上的三角形-->

    
 <div class="down"></div> <!--向下的三角形-->
    
 <div class="left"></div> <!--向左的三角形-->
    
 <div class="right"></div> <!--向右的三角形-->
    
    
    
    

 /*想获取朝那边三角形,给相反的一边设置颜色,font-size: 0;line-height: 0;可以兼容ie6*/

    
 .up{width: 0;height: 0;border-left: 20px solid transparent;border-right: 20px solid transparent;border-bottom: 20px solid #f00;font-size: 0;line-height: 0;}
    
 .down{width: 0;height: 0;border-left: 20px solid transparent;border-right: 20px solid transparent;border-top: 20px solid #f00;font-size: 0;line-he