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: '10px', $thickness: '5px' $direction: 'up') {
width: 0
height: 0
@if $direction == 'up' {
border-right: $size solid transparent;
border-left: $size solid transparent;
border-bottom: $thickness solid $color;
}
@if $direction == 'down' {
border-right: $size solid transparent;
border-left: $size solid transparent;
border-top: $thickness solid $color;
}
@if $direction == 'right' {
border-top: $size solid transparent;
border-bottom: $size solid transparent;
border-left: $thickness solid $color;
}
@if $direction == 'left' {
border-top: $size solid transparent;
border-bottom: $size solid transparent;
border-right: $thickness solid $color;
}
}
.arrow {
&-up { @include arrow($direction: 'up') }
&-down { @include arrow($direction: 'down') }
&-left { @include arrow($direction: 'left') }
&-right { @include arrow($direction: 'right') }
}
<div class="arrow-up"></div>
<div class="arrow-down"></div>
<div class="arrow-right"></div>
<div class="arrow-left"></div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment