Skip to content

Instantly share code, notes, and snippets.

@manikrathee
Forked from MoOx/sass-error.scss
Created May 7, 2014 21:05
Show Gist options
  • Save manikrathee/f8b03ae39560e702e28e to your computer and use it in GitHub Desktop.
Save manikrathee/f8b03ae39560e702e28e to your computer and use it in GitHub Desktop.
/**
* Shape/Polygon/Triangle
*
* @author Maxime Thirouin [email protected] @MoOx
*/
@mixin triangle($direction: top, $width: 1em, $height: 0, $color: #000)
{
@if ($height == 0)
{
$height: $width;
}
width: 0;
height: 0;
@if ($direction == 'top')
{
border-left: $width solid transparent;
border-right: $width solid transparent;
border-bottom: $height solid $color;
}
@elseif ($direction == 'bottom')
{
border-left: $width solid transparent;
border-right: $width solid transparent;
border-top: $height solid $color;
}
@elseif ($direction == 'left')
{
border-top: $width solid transparent;
border-right: $height solid $color;
border-bottom: $width solid transparent;
}
@elseif ($direction == 'right')
{
border-top: $width solid transparent;
border-left: $height solid $color;
border-bottom: $width solid transparent;
}
@elseif ($direction == 'top-left')
{
border-top: $width solid $color;
border-bottom: $width solid transparent;
border-left: $width solid $color;
border-right: $width solid transparent;
}
@elseif ($direction == 'top-right')
{
border-top: $width solid $color;
border-bottom: $width solid transparent;
border-left: $width solid transparent;
border-right: $width solid $color;
}
@elseif ($direction == 'bottom-left')
{
border-top: $width solid transparent;
border-bottom: $width solid $color;
border-left: $width solid $color;
border-right: $width solid transparent;
}
@elseif ($direction == 'bottom-right')
{
border-top: $width solid transparent;
border-left: $width solid transparent;
border-bottom: $width solid $color;
border-right: $width solid $color;
}
@else
{
// @error will be nice !!
@warn 'The direction used does not exist';
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment