scss scss三角混合

Posted 2021-05-18

//==== Simple SCSS mixin to create CSS triangles
//==== Example: @include css-triangle("up", 10px, #fff);
@mixin css-triangle($direction: "down", $size: 20px, $color: #000) {
    width: 0;
    height: 0;
    border-left: $size solid #{setTriangleColor($direction, "left", $color)};
    border-right: $size solid #{setTriangleColor($direction, "right", $color)};
    border-bottom: $size solid #{setTriangleColor($direction, "bottom", $color)};
    border-top: $size solid #{setTriangleColor($direction, "top", $color)};
}

//Utility function to return the relevant colour depending on what type of arrow it is
@function setTriangleColor($direction, $side, $color) {

    @if $direction == "left" and $side == "right"
    or  $direction == "right" and $side == "left"
    or $direction == "down" and $side == "top"
    or $direction == "up" and $side == "bottom" {
        @return $color
    } @else {
        @return rgba(0,0,0,0);
    }

}