.column
  h1 basic
  span.top
  span.left
  span.bottom
  span.right
  span.topright
  span.topleft
  span.bottomright
  span.bottomleft
  
.column
  h1 advanced
  span.top-scalene
  span.bottomright-scalene
  span.weird weird

/**
* Less CSS triangle mixin, create any kind of triangles with ease

* Use: 
* .triangle(direction,width,height,color);

* Example:
* @square: 50px;
* @color: red;
* selector {
*	 .triangle(bottomright,@square,@square,@color);
* }

* https://github.com/juanbrujo/triangle-mixin.less
* 2014 © Jorge Epuñan | csslab.cl
*/

.triangle-base() {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    -moz-transform: scale(.9999);
}
.triangle(@direction, @sizeH, @sizeV, @color) when (@direction = top) {
    .triangle-base();
    border-width: 0 @sizeV @sizeH @sizeV;
    border-color: transparent transparent @color transparent;
}
.triangle(@direction, @sizeH, @sizeV, @color) when (@direction = bottom) {
    .triangle-base();
    border-width: @sizeV @sizeH 0 @sizeV;
    border-color: @color transparent transparent transparent;
}
.triangle(@direction, @sizeH, @sizeV, @color) when (@direction = left) {
    .triangle-base();
    border-width: @sizeV @sizeH @sizeV 0;
    border-color: transparent @color transparent transparent;
}
.triangle(@direction, @sizeH, @sizeV, @color) when (@direction = right) {
    .triangle-base();
    border-width: @sizeV 0 @sizeV @sizeH;
    border-color: transparent transparent transparent @color;
}
.triangle(@direction, @sizeH, @sizeV, @color) when (@direction = topright) {
    .triangle-base();
    border-width: 0 @sizeH @sizeV 0;
    border-color: transparent @color transparent transparent;
}
.triangle(@direction, @sizeH, @sizeV, @color) when (@direction = bottomright) {
    .triangle-base();
    border-width: 0 0 @sizeH @sizeV;
    border-color: transparent transparent @color transparent;
}
.triangle(@direction, @sizeH, @sizeV, @color) when (@direction = bottomleft) {
    .triangle-base();
    border-width: @sizeH 0 0 @sizeV;
    border-color: transparent transparent transparent @color;
}
.triangle(@direction, @sizeH, @sizeV, @color) when (@direction = topleft) {
    .triangle-base();
    border-width: @sizeH @sizeV 0 0;
    border-color: @color transparent transparent transparent;
}

/**
* Use
*/

@square: 30px;
@color: #ecf0f1;

// BASIC
.top {
  .triangle(top,@square,@square,@color);
}
.left {
  .triangle(left,@square,@square,@color);
}
.bottom {
  .triangle(bottom,@square,@square,@color);
}
.right {
  .triangle(right,@square,@square,@color);
}
.topright{
  .triangle(topright,@square,@square,@color);
}
.topleft{
  .triangle(topleft,@square,@square,@color);
}
.bottomright{
  .triangle(bottomright,@square,@square,@color);
}
.bottomleft{
  .triangle(bottomleft,@square,@square,@color);
}

// ADVANCED
.top-scalene {
  .triangle(top,@square*2,@square/2,@color);
}
.bottomright-scalene {
  .triangle(bottomright,@square*2,@square,@color);
}
.weird {
  width: @square*2;
  height: @square;
  line-height: @square;
  background-color: @color;
  color: black;
  position: relative;
  text-align: center;
  text-shadow: none;
  cursor: pointer;
        
  &:after {
    position: absolute;
    left: 0;
    top: [email protected];
    .triangle(top,@square,@square,@color);
  }
  &:before {
    position: absolute;
    left: 0;
    top: @square;
    .triangle(topleft,@square*2,@square*2,@color);
  }
  &:hover {
    background-color: darken(@color,10%);

    &:after {
      .triangle(top,@square,@square,darken(@color,10%));
    }
    &:before {
      .triangle(topleft,@square*2,@square*2,darken(@color,10%));
    }
  }
}

/**
* General Styles 
*/
body {background-color:#27ae60; color:#ecf0f1; }
span {
  display: inline-block;
  margin: 20px auto;
  position: relative;
  
  &:before {
    content: attr(class);
    position: absolute;
    top: 0;
    right: 0;
    width: 90px;
    height: 20px;
    text-align: left;
  }
}
.column {
  width: 50%;
  float: left;
  font-size:.8em; 
  text-shadow:#7f8c8d 1px 1px 0;
  
  h1 {
    text-align: center;
    color: darken(#27ae60, 10%);
    text-shadow: none;
  }
}