Skip to content

Instantly share code, notes, and snippets.

@bpainter
Created July 15, 2011 19:08
Show Gist options
  • Star 32 You must be signed in to star a gist
  • Fork 14 You must be signed in to fork a gist
  • Save bpainter/1085320 to your computer and use it in GitHub Desktop.
Save bpainter/1085320 to your computer and use it in GitHub Desktop.
Sass mixin for arrows based on The Shapes of CSS from Chris Coyier http://css-tricks.com/examples/ShapesOfCSS/
// --------------------------------------------------------
// arrows
// --------------------------------------------------------
// $direction: top, left, right, bottom, top-left, top-right, bottom-left, bottom-right
// $color: hex, rgb or rbga
// $size: px or em
// @example
// .element{
// @include arrow(top, #000, 50px);
// }
@mixin arrow($direction, $color, $size){
display: block;
height: 0;
width: 0;
@if $direction == 'top' {
border-left: $size solid transparent;
border-right: $size solid transparent;
border-bottom: $size solid $color;
} @else if $direction == 'right' {
border-top: $size solid transparent;
border-bottom: $size solid transparent;
border-left: $size solid $color;
} @else if $direction == 'bottom' {
border-top: $size solid $color;
border-right: $size solid transparent;
border-left: $size solid transparent;
} @else if $direction == 'left' {
border-top: $size solid transparent;
border-right: $size solid $color;
border-bottom: $size solid transparent;
} @else if $direction == 'top-left' {
border-top: $size solid $color;
border-right: $size solid transparent;
} @else if $direction == 'top-right' {
border-top: $size solid $color;
border-left: $size solid transparent;
} @else if $direction == 'bottom-left' {
border-bottom: $size solid $color;
border-right: $size solid transparent;
} @else if $direction == 'bottom-right' {
border-bottom: $size solid $color;
border-left: $size solid transparent;
}
}
@melindavoo
Copy link

ah found it:) whew! thx Mr. Painter!

@valdelama
Copy link

Nicely done, thanks for sharing

@midlantica
Copy link

@johnantoni
Copy link

nice work, works fine with foundation 5 and not too complex

@paullferguson
Copy link

Cheers! Forked and added the option to position which I find myself doing often with there puppies, also stronger reset as sometimes for when you want to switch via media queries.

@razmig
Copy link

razmig commented Apr 28, 2015

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