工作中我們可能經(jīng)常會(huì)用到箭頭，回退按鈕，頁面指向怪与，向下或者向上的標(biāo)識(shí)，這些可以用邊框遮蓋的效果來實(shí)現(xiàn)缅疟，可以將其作為基礎(chǔ)封裝在base.scss中分别。
// 箭頭混合
@mixin arrow($w: 10px, $color: #000, $dir: top) {
// 兼容行內(nèi)和塊
width: 0;
font-size: 0;
//多寬的三角
border: $w solid transparent;
//朝向和顏色
border-#{$dir}-color: $color;
}
豆瓣的這個(gè)箭頭的實(shí)現(xiàn)就是兩個(gè)邊框的遮蓋效果，可以這樣使用
.arrow{
@include arrow(10px ,#ccc,left);
position: relative;
left: -10px;
top: 0;
.white{
position: absolute;
left: -13px;
top: -10px;
border-left-color: #fff;
}
}
內(nèi)部的white類應(yīng)用了外層箭頭混合窿吩，并更改了顏色為白色茎杂，這樣兩個(gè)邊框進(jìn)行遮蓋，將其位置進(jìn)行微調(diào)纫雁，就可以達(dá)到上面的效果煌往。
