CSS triangle arrow

arrow.scss

.arrow-up {
	width: 0; 
	height: 0; 
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	
	border-bottom: 10px solid black;
}

.arrow-down {
	width: 0; 
	height: 0; 
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	
	border-top: 10px solid black;
}

.arrow-right {
	width: 0; 
	height: 0; 
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	
	border-left: 10px solid black;
}

.arrow-left {
	width: 0; 
	height: 0; 
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	
	border-right: 10px solid black; 
}

/* MIXIN SASS */
@mixin arrow($dir, $size: 10px, $color: #000) {
    position: absolute;
    width: 0; 
    height: 0; 
    
    @if $dir == "up" {
        border-left: $size solid transparent;
        border-right: $size solid transparent;

        border-bottom: $size solid $color;
    } @else if $dir == "down" {
        border-left: $size solid transparent;
        border-right: $size solid transparent;

        border-top: $size solid $color;
    } @else if $dir == "left" {
        border-top: $size solid transparent;
        border-bottom: $size solid transparent;

        border-right: $size solid $color;
    } @else if $dir == "right" {
        border-top: $size solid transparent;
        border-bottom: $size solid transparent;

        border-left: $size solid $color;
    }
}