txan9q
Last Updated: February 25, 2016
·
1.475K
· paprikkastudio

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;
    }

}

3 Responses
Add your response

5366

Seems simple !

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

over 1 year ago ·
5367

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

over 1 year ago ·
5371

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

over 1 year ago ·