CSS空心箭头

使用before和after伪类实现空心箭头

// 主要利用before和after的边框实心箭头，通过绝对定位覆盖完成看上去像空心箭头的设计
.dom {
  display: inline-block;
  position: relative;
  &::before, &::after {
    content: '';
    position: absolute;
    right: 4px;
    /*兼容ie8-*/
    border-bottom: 8px transparent dashed;
    border-left: 10px transparent dashed;
    border-right: 10px transparent dashed;
    border-top: 8px white solid;
    overflow: hidden;
  }
  &::after {
    /*重要*/
    top: 9px;
    border-top: 10px #888 solid;
  }
  &::before {
    /*重要*/
    z-index: 1;
    top: 8px;
    border-top: 10px white solid;
  }
}