Skip to content

Instantly share code, notes, and snippets.

@willbowling

willbowling/_sass-arrows.sass

Created April 8, 2014 19:59
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save willbowling/10181744 to your computer and use it in GitHub Desktop.
Save willbowling/10181744 to your computer and use it in GitHub Desktop.
Download ZIP
SASS CSS Arrows - Up Down Left Right - via border
Raw
_sass-arrows.sass
=arrow-up($color: rgba(white, .50), $size: 5px)
width: 0
height: 0
border-left: $size solid transparent
border-right: $size solid transparent
border-bottom: $size solid $color
=arrow-down($color: rgba(white, .50), $size: 5px)
width: 0
height: 0
border-left: $size solid transparent
border-right: $size solid transparent
border-top: $size solid $color
=arrow-right($color: rgba(white, .50), $size: 5px)
width: 0
height: 0
border-top: $size solid transparent
border-bottom: $size solid transparent
border-left: $size solid $color
=arrow-left($color: rgba(white, .50), $size: 5px)
width: 0
height: 0
border-top: 10px solid transparent
border-bottom: 10px solid transparent
border-right: 10px solid $color
@willbowling
Copy link
Author

usage:

.arrow-down
  +arrow-down($color: silver, $size: 15)

or

  +arrow-down($color: silver)

or

  +arrow-down(silver, 15)

<div class="arrow-down"></div>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment