css伪类画三角箭头

Date: 2017-04-03

• 使用before伪类

.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伪类

.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透明