Responsive Triangle Less Mixin

gistfile1.less

/**
Based on the work:

- http://jsfiddle.net/josedvq/3HG6d/
- http://codeitdown.com/css-triangles-responsive/
*/

.responsive-triangle-base(@size; @color;) {
    width: @size/2;
    height: 0;
    overflow: hidden;

    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;

    &:after {
      content: '';
      display: block;

      width: 0; height: 0;
      border: 500px solid @color;
    }
}
.responsive-triangle(@direction, @size, @color) when (@direction = up) {
    .responsive-triangle-base(@size, @color);
    padding: 0 0 @size/2 @size/2;

    &:after {
      border-left-color: transparent;
      border-right-color: transparent;
      border-top: none;
      margin: 0 0 0 -500px;
    }
}
.responsive-triangle(@direction, @size, @color) when (@direction = down) {
    .responsive-triangle-base(@size, @color);
    padding: @size/2 0 0 @size/2;

    &:after {
      border-left-color: transparent;
      border-right-color: transparent;
      border-bottom: none;
      margin: -500px 0 0 -500px;
    }
}