Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
SASS mixin to help build CSS triangles (CSS triangle hat-tip to CSS-Tricks: http://css-tricks.com/snippets/css/css-triangle/)
@mixin css-arrow($color:#000, $size:'5px', $direction:'up')
width: 0
height: 0
@if $direction == 'up'
border-right: $size solid transparent
border-left: $size solid transparent
border-bottom: $size solid $color
@if $direction == 'down'
border-right: $size solid transparent
border-left: $size solid transparent
border-top: $size solid $color
@if $direction == 'right'
border-top: $size solid transparent
border-bottom: $size solid transparent
border-left: $size solid $color
@if $direction == 'left'
border-top: $size solid transparent
border-bottom: $size solid transparent
border-right: $size solid $color
.arrow-up
+css-arrow(#000,5px,up)
.arrow-down
+css-arrow(#000,5px,down)
.arrow-right
+css-arrow(#000,5px,right)
.arrow-left
+css-arrow(#000,5px,left)
.terribly-disgusting-arrow
+css-arrow(blue,20px,right)
.terribly-disgusting-arrow
+css-arrow(blue,20px,up)
<div class="arrow-up"></div>
<div class="arrow-down"></div>
<div class="arrow-right"></div>
<div class="arrow-left"></div>
@alkaithil
Copy link

alkaithil commented Jul 25, 2014

Useful mixin, thanks for sharing!

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