/**
 * @desc  三角形
 * @param $width
 * @param $height
 * @param $color
 * @param $direction: top bottom left right
 */
@mixin triangle($width, $height, $color: #000, $direction: bottom) {
    $map-direction: (
        top: bottom left right,
        bottom: top left right,
        left: right top bottom,
        right: left top bottom
    );
    @if not map-has-key($map-direction, $direction) {
        @error "triangle $direction 必须为：#{map-keys($map-direction)}";
    }
    $conf: map-get($map-direction, $direction);
    @if $direction==top or $direction==bottom {
        $width: $width/2;
    }
    @else {
        $height: $height/2;
    }

    height: 0;
    width: 0;
    border-#{nth($conf, 1)}: $height solid $color;
    border-#{nth($conf, 2)}: $width solid transparent;
    border-#{nth($conf, 3)}: $width solid transparent;
}


/**
 * @desc 通过背景图实现三角形
 */
@mixin svg-triangle($width, $height, $color: #000, $direction: bottom) {
    $map-direction: (
        top: 0,
        bottom: 180 strip-unit($width) strip-unit($height),
        left: -90 strip-unit($height) strip-unit($height),
        right: 90 strip-unit($width) strip-unit($width)
    );
    @if not map-has-key($map-direction, $direction) {
        @error "svg-triangle $direction 必须为：#{map-keys($map-direction)}";
    }
    $degrees: map-get($map-direction, $direction);

    width: $width;
    height: $height;
    background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%22#{$width * 2}%22%20height%3D%22#{$height * 2}%22%3E%3Cpath%20fill%3D%22#{$color}%22%20transform%3D%22rotate(#{$degrees})%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E');
    background-repeat: no-repeat;
    background-size: 100% auto;
}