CSS Arrow LESS Mixin (v.2)

CSS Arrow LESS Mixin (v.2).markdown

CSS Arrow LESS Mixin (v.2)

Relative positioned, border-based CSS arrows generated by a LESS mixin. Parameters: size, stroke, color, hover-color and radius.

A Pen by Peter Varga on CodePen.

License.

index.html

<div class="demo">
  <a class="my-arrow my-arrow-top"></a>
  <a class="my-arrow my-arrow-bottom"></a>
  <a class="my-arrow my-arrow-left"></a>
  <a class="my-arrow my-arrow-right"></a>
</div>

style.css

//.vp-arrow(@size,@stroke,@color,[@color-hover,@radius]);

.my-arrow{
  .vp-arrow(100px,5px,#FF6049,#026073,10px); 
  
  // add anything..
  float:left;
  cursor:pointer;
}



// LESS MIXIN:
.vp-arrow(@size,@stroke,@color,@color-hover:@color,@radius:0px) {
  //general 
  display:block;
  position:relative;
  width: @size;
  height: @size;
  
  &:hover{
    &:after{
      border-color: @color-hover;
    }
  }
  
  // better click experience
  &:after{
    content: '';
    background:none;
    
    width:@size*0.666;
    height:@size*0.666;
    position:absolute;
    z-index:1;
    
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -o-transform: rotate(-45deg);   
  }
    
  .vp-arrow-directions(@stroke,@color,@color-hover,@j) when (@j < 5) {
      @directions: top,right,bottom,left,top;
      @direction: extract(@directions, @j);
      @s1: extract(@directions,@j);
      @s2: extract(@directions,@j+1);
    
      &-@{direction}:after { 
        border-@{s1}: @stroke solid @color; 
        border-@{s2}: @stroke solid @color; 
       
        @{s2}:@size/6-@stroke/2;
        @{s1}:@size/3-@stroke/2;
      }
    
      &-@{direction}:after when ( mod(@j,2) = 0) { 
        -webkit-@{s2}-@{s1}-border-radius: @radius;
        -moz-@{s2}-@{s1}-border-radius: @radius;
        border-@{s2}-@{s1}-radius: @radius;
      }  
    
      &-@{direction}:after when not ( mod(@j,2) = 0) { 
        -webkit-@{s1}-@{s2}-border-radius: @radius;
        -moz-@{s1}-@{s2}-border-radius: @radius;
        border-@{s1}-@{s2}-radius: @radius;
      }    
    
      .vp-arrow-directions(@stroke,@color,@color-hover,@j + 1);
  }
  .vp-arrow-directions(@stroke,@color,@color-hover,1);
}

// DEMO STYLE
body{background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/233828/g.png') center center repeat;}
.demo{margin:100px auto;width:400px;}