sass之triangle

 

   

@mixin triangle($direction,$size,$borderColor) {
     content:  "";
     height: 0;
     width: 0;

     @if $direction == left {
            border-right: $size solid $borderColor;
            border-top: $size solid transparent;
            border-bottom: $size solid transparent;
     }

     @else if $direction == right {
            border-left: $size solid $borderColor;
            border-top: $size solid transparent;
            border-bottom: $size solid transparent;
     }

     @else if $direction == top {
            border-bottom: $size solid $borderColor;
            border-right: $size solid transparent;
            border-left: $size solid transparent;
     }

     @else if $direction == bottom {
            border-top: $size solid $borderColor;
            border-right: $size solid transparent;
            border-left: $size solid transparent;
     }
}