%triangle{
    width: 0px;
    height: 0px;
    display: inline-block;
}
@mixin triangle($direction:top, $size:30px, $border-color:black) {
    border-width: $size;
    border-#{$direction}-width: 0;
    @if ($direction==top) {
        border-color: transparent transparent $border-color transparent;
        border-style: dashed dashed solid dashed;
    }
    @else if($direction==right) {
        border-color: transparent transparent transparent $border-color;
        border-style: dashed dashed dashed solid;
    }
    @else if($direction==bottom) {
        border-color: $border-color transparent transparent transparent;
        border-style: solid dashed dashed dashed;
    }
    @else if($direction==left) {
        border-color: transparent $border-color transparent transparent;
        border-style: dashed solid dashed dashed;
    }
}

.p0 {
    @extend %triangle;
    @include triangle();
}

.p1 {
    @extend %triangle;
    @include triangle(right, 50px, red);
}

.p2 {
    @extend %triangle;
    @include triangle(bottom, 50px, blue);
}

.p3 {
    @extend %triangle;
    @include triangle(left, 50px, green);
}