首页 > 其他分享 >使用before和after伪类实现空心箭头

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

时间:2022-08-23 20:04:05浏览次数:59  
标签:伪类 top after 箭头 10px border before

// 主要利用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;
  }
}

标签:伪类,top,after,箭头,10px,border,before
From: https://www.cnblogs.com/jia-zq/p/16617575.html

相关文章