txan9q
Last Updated: February 25, 2016
·
1.36K
· paprikkastudio
Photo

SCSS pure css arrows

Please don't forget to use relative / absolute positioning for parent container.

EDIT: seems that coderwall's markdown breaks scss syntax by treating @each statemens as anchor tags, so I've posted working copy / paste friendly example here: http://cssdeck.com/labs/w7y3rec6

@mixin arrow ($w: 5px, $color: #ff8000, $position:top, $offset:50%){

    content   : '';
    position  : absolute;
    border    : $w solid transparent;

    @if $position == top{
      border-bottom-color: $color;
      top: -2 * $w;
      margin-left: -.5 * $w;
      right: $offset;
    } @else if $position == right{
      border-left-color: $color;
      right: -2 * $w;
      margin-top: -.5 * $w;
      top: $offset;

    } @else if $position == bottom{
      border-top-color: $color;
      bottom: -2 * $w;
      margin-left: -.5 * $w;
      left: $offset;

    } @else{
      // left
      border-right-color: $color;
      left: -2 * $w;
      margin-top: -.5 * $w;
      top: $offset;
    }

}
Say Thanks
Respond

3 Responses
Add your response

5366
12417984 10209211765477105 942606612610417330 n

Seems simple !

However, I can't manage to compile it. Did I miss anything ?
http://cssdeck.com/labs/xoetl89m

over 1 year ago ·
5367
Photo

Hm, that's funny, coderwall compiled @rules into html anchor elements,

over 1 year ago ·
5371
Photo

@manudwarf I've posted an example (with non-formatted source) here:
http://cssdeck.com/labs/w7y3rec6

over 1 year ago ·