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;

}