css3制作网页中常见的小箭头（html5如何弄箭头）

/* 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;

}

推荐下我的前端群：524262608，不管你是小白还是大牛，小编我都挺欢迎，不定期分享干货，包括我自己整理的一份2017最新的前端资料和零基础入门教程，欢迎初学和进阶中的小伙伴。

/* 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;

}