工作中我们可能经常会用到箭头，回退按钮，页面指向，向下或者向上的标识，这些可以用边框遮盖的效果来实现，可以将其作为基础封装在base.scss中。
// 箭头混合
@mixin arrow($w: 10px, $color: #000, $dir: top) {
// 兼容行内和块
width: 0;
font-size: 0;
//多宽的三角
border: $w solid transparent;
//朝向和颜色
border-#{$dir}-color: $color;
}
豆瓣的这个箭头的实现就是两个边框的遮盖效果，可以这样使用
.arrow{
@include arrow(10px ,#ccc,left);
position: relative;
left: -10px;
top: 0;
.white{
position: absolute;
left: -13px;
top: -10px;
border-left-color: #fff;
}
}
内部的white类应用了外层箭头混合，并更改了颜色为白色，这样两个边框进行遮盖，将其位置进行微调，就可以达到上面的效果。
网友评论