三角形 & 箭头

1.border

.triangle{

width:0;

height:0; /* 设定div大小 */

overflow:hidden; /* 防溢出，稳固兼容性 */

border-width:10px; /* 箭头尺寸 */

/* 给箭头着色，四个值分别是边框的四个方向，箭头的方向正好相反 */

border-color:blue transparent transparent transparent;

/* 为了兼容性，最好把四个值都补上，需要的方向设实线，其他方向虚线 */

border-style:solid dashed dashed dashed;

}

2. :after rotate

<div class='arrow'><span></span></div>

.arrow{

width:40px;

height:40px;

}

.arrow:after{

content:'';

display:block;

width:25px;

height:25px;

border-right:1px solid #888;

border-top:1px solid #888;

transform:rotate(135deg);

}