LESS CSS Triangle Mixin using Pseudo Elements

/*  CSS triangles: used under certain panels, avoids needing images
    Pass the function the colour, the width and the height, in that order.
    Also pass position, alignment and an offset if necessary.
    + Position can be 'top','bottom' or a PX value.
    + Alignment can be one of 'right', 'left', 0 (left), 100% (right)
    + Offset should be a PX value

    Notes:
    + 360deg transform: this smooths the triangles in webkit.
    + Two bottom border declarations: The 'transparent' is for old IE,
      the rgba value and inset keyword improve rendering in Firefox.

    Usage:
    .triangle(colour,width,height,position,alignment,offset)
*/

.triangle (@colour:@blue20, @width:80px, @height:20px, @vert:bottom, @align:right, @offset:0) {
    display:block;
    width:0; height:0;
    border-bottom:@height solid transparent;
    border-bottom:@height inset rgba(255,255,255,0);
    position:absolute;
    .transform(rotate,'360deg');
}
.triangle (@colour:@blue20, @width:80px, @height:20px, @vert:-20px, @align:right, @offset:0) when (@vert = top),(@vert = 0) {
    bottom:auto; top:0;
}
.triangle (@colour:@blue20, @width:80px, @height:20px, @vert:-20px, @align:right, @offset:0) when (@vert = bottom),(@vert = 100%) {
    bottom:-@height; top:auto;
}
.triangle (@colour:@blue20, @width:80px, @height:20px, @vert:-20px, @align:right, @offset:0) when (@align = right),(@align = 100%)  {
    left:auto; right:0;
    border-left:none;
    border-right:@width solid @colour;
    margin-right:@offset;

}
.triangle (@colour:@blue20, @width:80px, @height:20px, @vert:-20px, @align:right, @offset:0) when (@align = left),(@align = 0) {
    left:0; right:auto;
    border-right:none;
    border-left:@width solid @colour;
    margin-left:@offset;
}

.triangle-dtop (@colour:@grey70, @width:80px, @height:20px, @vert:-20px, @align:left, @offset:20) {
    display:block;
    width:0; height:0;
    border-bottom:@height solid @colour;
    border-left:@width solid transparent;
    border-left:@width inset rgba(255,255,255,0);
    border-right:@width solid transparent;
    border-right:@width inset rgba(255,255,255,0);
    position:absolute;
    left:@offset; top:@vert;
    .transform(rotate,'360deg');
}



EXAMPLE USAGE:

.blognav {
    position:relative;
    float:left;
    width:21%;
    padding:2em 2%;
    margin:-2em 0 0 -2%;
    background:@grey70;
    .deco {
        .triangle(@grey70,80px,20px,bottom,left);
    }
}