如何使用纯CSS3实现网页中常见的小箭头？

/* css3三角形（向上 ▲） */
div.arrow-up {
 width:0px;
 height:0px;
border-left:5px solid transparent; /* 右透明 */
 border-right:5px solid transparent; /*右透明 */
 border-bottom:5px solid #2f2f2f; /* 定义底部颜色 */
 font-size:0px;
 line-height:0px;
}
/* css3三角形（向下 ▼） */
div.arrow-down {
 width:0px;
 height:0px;
 border-left:5px solid transparent;
 border-right:5px solid transparent;
 border-top:5px solid #2f2f2f;
 font-size:0px;
 line-height:0px;
}
/* css3三角形（向左） */
div.arrow-left {
 width:0px;
 height:0px;
 border-bottom:5px solid transparent; /* left arrow slant */
 border-top:5px solid transparent; /* right arrow slant */
 border-right:5px solid #2f2f2f; /* bottom, add background color here */
 font-size:0px;
 line-height:0px;
}
/* css3三角形（向右） */
div.arrow-rightright {
 width:0px;
 height:0px;
 border-bottom:5px solid transparent; /* left arrow slant */
 border-top:5px solid transparent; /* right arrow slant */
 border-left:5px solid #2f2f2f; /* bottom, add background color here */
 font-size:0px;
 line-height:0px;
}