scss实现不同方向的三角

//定义一个三角的函数 实现不同方向的三角加兼容ie6
//第一个参数传入方向
//第二个参数传入大小
//第三个参数传入颜色
//注意:传入参数中间必须逗号分隔
@mixin triangle($x, $y:10px, $z:white ){
    @if $x == "top"{
        border-width: $y;
        border-color:transparent transparent $z transparent;
        border-style: dashed dashed solid dashed;
    }
    @else if $x == "bottom"{
        border-width: $y;
        border-color: $z transparent transparent transparent;
        border-style: solid dashed dashed dashed;
    }
    @else if $x == "left"{
        border-width: $y;
        border-color:transparent $z transparent transparent;
        border-style: dashed solid dashed dashed;
    }
    @else if $x == "right"{
        border-width: $y;
        border-color:transparent transparent transparent $z;
        border-style: dashed dashed dashed solid;
    }
    width: 0;
    height: 0;
    overflow: hidden;
}
.box{
    @include triangle(right, 200px, red);
}

转载于:https://www.cnblogs.com/bgxiaoniu/p/6662412.html