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);}
相關文章
相關標籤/搜索