css 上下左右箭头

1、正常设置边框的div

.normal {  
    width: 50px;
    height: 50px;
    border-width: 5px 5px 5px 5px;
    border-color: red blue yellow green;
    border-style: solid;
    background-color: gray;
} 
<div class="normal"></div>

效果：

2、向下的箭头 类似于 V

.arrow-down
    width: 0;   
    height: 0;   
    border-left: 20px solid transparent;  
    border-right: 20px solid transparent;  
    border-top: 20px solid #f00;  
    font-size: 0;  
    line-height: 0;  
}
<div class="normal"></div>

效果：

3、向上的箭头,类似于A,只有三个边，不能指定上边框

.arrow-up {  
    width: 0;   
    height: 0;   
    border-left: 5px solid transparent;  /* 左边框的宽 */  
    border-right: 5px solid transparent; /* 右边框的宽 */  
    border-bottom: 5px solid #2f2f2f; /* 下边框的长度|高,以及背景色 */  
    font-size: 0;  
    line-height: 0;  
}
<div class="normal"></div>

效果：

4、向左的箭头: 只有三个边：上、下、右。而 <| 总体来看，向左三角形的高=上+下边框的长度。 宽=右边框的长度

.arrow-left {
    width: 0;   
    height: 0;   
    border-bottom: 15px solid transparent;  /* 下边框的高 */  
    border-top: 15px solid transparent; /* 上方边框的高 */  
    border-right: 10px solid yellow; /* 右边框的长度|宽度，以及背景色 */  
    font-size: 0;  
    line-height: 0;  
} 
<div class="normal"></div>

效果：

5、向左的箭头: 只有三个边：上、下、右。而 <| 总体来看，向左三角形的高=上+下边框的长度。 宽=右边框的长度

.arrow-right {  
    width: 0;   
    height: 0;   
    border-bottom: 15px solid transparent;  /* 下边框的高 */  
    border-top: 15px solid transparent; /* 上方边框的高 */  
    border-left: 60px solid green; /* 左边框的长度|宽度，以及背景色 */  
    font-size: 0;  
    line-height: 0;  
} 
<div class="normal"></div>

效果：

参考： http://79px.com/html-css/61