使用before伪类
1
2
3
4
5
6
7
8
9.box:before{
content: '';
border-top: 9px solid transparent;/*方框上部分背景颜色为透明*/
border-bottom: 9px solid transparent;/*方框下部分背景为透明*/
border-right: 9px solid #eee;/*箭头背景颜色*/
position: absolute;/*绝对定位1*/
top: 25px;/*距离顶部位置偏移量2*/
left: -9px;/*距离左边位置偏移量3*/ /*123都是控制显示位置的*/
}使用after伪类
1
2
3
4
5
6
7
8
9.box:after{
content: '';
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
border-right: 7px solid #fbfdfb;/*箭头背景颜色，覆盖前面的#eee颜色，使其颜色与整体颜色一致*/
position: absolute;
top: 27px;
left: -7px;
}
tip:需要显示朝向那边，就不需要设置哪边的border，其对向的颜色需设置border，两边设置transparent透明,所有效果均为border模拟出来
如：此例箭头朝向左边，也即是border-left不设置，border-right上色，border-top和border-bottom透明