Less mixin to create a triangle

Triangle.less

.triangle-base(){
    &:after,
    &:before {
        z-index: 20;
        position: absolute;
        width: 0;
        height: 0;
        border-style: solid;
        content: " ";
    }
	&:before {
        z-index: 10;
    }
}

.triangle-up(@dir, @place, @bg, @border, @size) {
    .triangle-base();
    &:after,
    &:before {
        @{dir}: @place;
        top: 1px - @size;
        border-color: transparent transparent @bg;
        border-width: @size;
        border-top-width: 0;
    }
    &:before {
        top: 0px - @size;
        border-bottom-color: @border;
    }
}

.triangle-down(@dir, @place, @bg, @border, @size) {
    .triangle-base();
    &:after,
    &:before {
        @{dir}: @place;
        bottom: 1px - @size;
        border-color: @bg transparent transparent;
        border-width: @size;
        border-bottom-width: 0;
    }
    &:before {
        bottom: 0px - @size;
        border-top-color: @border;
    }
}

.triangle-left(@dir, @place, @bg, @border, @size) {
    .triangle-base();
    &:after,
    &:before {
        @{dir}: @place;
        left: 1px - @size;
        border-color: transparent @bg transparent;
        border-width: @size;
        border-left-width: 0;
    }
    &:before {
        left: 0px - @size;
        border-right-color: @border;
    }
}

.triangle-right(@dir, @place, @bg, @border, @size) {
    .triangle-base();
    &:after,
    &:before {
        @{dir}: @place;
        right: 1px - @size;
        border-color: transparent transparent transparent @bg;
        border-width: @size;
        border-right-width: 0;
    }
    &:before {
        right: 0px - @size;
        border-left-color: @border;
    }
}

/* Example

div {
    .triangle-up(right, 10px, #fff, #333, 8px);
}

*/