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

// 主要利用before和after的边框实心箭头,通过绝对定位覆盖完成看上去像空心箭头的设计,一下为less语法
.dom {
  display: inline-block;
  position: relative;
  &::before, &::after {
    content: '';
    position: absolute;
    right: 4px;
    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;
  }
}
posted @ 2022-08-23 19:47  jiazq  阅读(92)  评论(0)    收藏  举报