用纯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; }

总结