A LessCSS Mixin for Pure-CSS Ribbons

.ribbon(@height: 44px, @color: #FF2F96, @shadow-color: #e5e5e5, @shadow-size: 5px) {
    // Pure-CSS Ribbon
    //
    // The height must be even!
    //
    // The HTML needs to look like this:
    //
    // <hX> <-- Put this mixin on this element.
    //     <a href="">Ribbon Text</a>
    //     <span></span>
    // </hX>
    //
    // Style the ribbon's font-face/color/size/style on your own.

    position: relative;

    &:before {
        z-index: 43;
        content: "";
        background-color: @color;
        display: block;
        height: 10px;
        width: 10px;
        position: absolute;
        bottom: 0;
        left: 0px;
    }
    a {
        z-index: 40;
        background-color: @color;
        height: @height;
        line-height: @height !important;
        display: inline-block;
        text-decoration: none;
        position: relative;
        padding-left: @height;
        padding-right: @height/2;
        text-shadow: 0px 1px 0px darken(@color, 30%);

        box-shadow:         8px @shadow-size 0px @shadow-color;
        -moz-box-shadow:    8px @shadow-size 0px @shadow-color;
        -webkit-box-shadow: 8px @shadow-size 0px @shadow-color;

        border-top-left-radius:         2px;
        -moz-border-radius-topleft:     2px;
        -webkit-border-top-left-radius: 2px;

        -webkit-background-clip: padding-box;

        &:after {
            content: "";
            border: @height/2 solid @color;
            border-right-color: transparent;
            display: block;
            height: 0px;
            width: 0px;
            position: absolute;
            top: 0;
            right: -2 * (@height/2);
        }
        &:before {
            content: "";
            border: @height/2 solid @shadow-color;
            border-right-color: transparent;
            display: block;
            height: 0px;
            width: 0px;
            position: absolute;
            top: @shadow-size;
            right: -2 * (@height/2) - 2px;
        }
    }
    span {
        &:after {
            z-index: 42;
            content: "";
            position: absolute;
            bottom: -7px;
            left: -6px;
            display: block;
            height: 0px;
            width: 0px;
            border: 7px solid black;
            border-left-color: transparent;
            border-bottom-color: transparent;
            border-top-color: transparent;
        }
        &:before {
            z-index: 41;
            content:"";
            position: absolute;
            bottom: -8px;
            left: -8px;
            display: block;
            height: 0px;
            width: 0px;
            border: 8px solid @color;
            border-left-color: transparent;
            border-bottom-color: transparent;
            border-top-color: transparent;
        }
    }
}