CSS3 Arrows (LESS)

Arrows using CSS3, pseudo-elements and LESS

HTML

<script src="https://cyberxshare.googlecode.com/files/less-1.1.3.min.js"></script>
<h4>Arrows using CSS3 and LESS</h4>

<div class="line-vertical "></div>
<div class="line-vertical arrow-up"></div>
<div class="line-vertical arrow-down"></div>
<div class="line-vertical arrow-up arrow-down"></div>
<div class="float-left-box ">
    <div class="line-horizontal "></div>
    <div class="line-horizontal arrow-left"></div>
    <div class="line-horizontal arrow-right"></div>
    <div class="line-horizontal arrow-left arrow-right"></div>
</div>
<div id="curvedarrow"></div>
<!-- http://css-tricks.com/examples/ShapesOfCSS/ -->

CSS

.float-left-box {
    float: left; padding: 15px 0 0 45px;
}

/***************** PARAMS SECTION ******************/
/* vertical arrows params */
.line-vertical {
    height: 75px; /* line length */
    margin-left: 20px;
    margin-top: 35px;
    float: left;
}
/* horizontal arrows */
.line-horizontal {
    width: 135px; /* line length */
    margin-left: 20px;
    margin-top: 20px;
}

@arrow-length: 16px;
@arrow-width: 6px;        /* <-- Sorry, only 2*n values */
@arrow-line-width: 2px;   /* <-- pixels are discrete :-) */
@arrow-color: #8cc;

/******************** CSS **********************/
/* arrows common css */
.line-horizontal, 
.line-vertical {
    position: relative;
    background: @arrow-color;    
}
.arrow-up:after,
.arrow-down:before, 
.arrow-left:after,
.arrow-right:before {
    content: "";
    position: absolute;
    width: 0px;
    height: 0px;
    border: (@arrow-width/2) solid transparent;
}

/* vertical arrows */
.line-vertical {
    width: @arrow-line-width;
}
.arrow-up:after,
.arrow-down:before {
    left: -(@arrow-width/2 - @arrow-line-width/2);
}
.arrow-up:after {
    top: -(@arrow-length);
    border-bottom: @arrow-length solid @arrow-color;
}

.arrow-down:before {
    bottom: -(@arrow-length);
    border-top: @arrow-length solid @arrow-color;
}

/* horizontal arrows */
.line-horizontal {
    height: @arrow-line-width;    
}
.arrow-left:after,
.arrow-right:before {
    top: -(@arrow-width/2 - @arrow-line-width/2);
}
.arrow-left:after {
    left: -(@arrow-length);
    border-right: @arrow-length solid @arrow-color;
}
.arrow-right:before {
    right: -(@arrow-length);
    border-left: @arrow-length solid @arrow-color;
}

/*=================== CURVED ARROW ===================*/
#curvedarrow {
  position: relative;
  width: 0;
  height: 0;
  border-top: 9px solid transparent;
  border-right: 9px solid red;
  -webkit-transform: rotate(10deg);
  -moz-transform: rotate(10deg);
  -ms-transform: rotate(10deg);
  -o-transform:...

JavaScript

// LESS парсит <STYLE> c типом 'text/less'
document.getElementsByTagName('head')[0].getElementsByTagName('style')[0].type = 'text/less';
less.refreshStyles();