/*
USAGE:
.sample {
@include triangle(right, #000, 20px, 20px);
}
*/
@mixin triangle ($direction: bottom, $color:#000000, $width:10px, $height:10px) {
@if not index(top right bottom left top-right top-left bottom-right bottom-left, $direction) {
@error "Direction is invalid.";
}
content: "";
display: inline-block;
height: 0;
z-index: 2;
width: 0;
@if $direction == top {
border-top: 0;
border-left: $width solid transparent;
border-right: $width solid transparent;
border-bottom: $height solid $color;
} @else if $direction == right {
border-right: 0;
border-top: $width solid transparent;
border-bottom: $width solid transparent;
border-left: $height solid $color;
} @else if $direction == bottom {
border-bottom: 0;
border-left: $width solid transparent;
border-right: $width solid transparent;
border-top: $height solid $color;
} @else if $direction == left {
border-left: 0;
border-top: $width solid transparent;
border-bottom: $width solid transparent;
border-right: $height solid $color;
} @else if $direction == top-right {
width: 0;
height: 0;
border-style: solid;
border-width: 0 $width $height 0;
border-color: transparent $color transparent transparent;
} @else if $direction == top-left {
width: 0;
height: 0;
border-style: solid;
border-width: $height $width 0 0;
border-color: $color transparent transparent transparent;
} @else if $direction == bottom-right {
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 $height $width;
border-color: transparent transparent $color transparent;
} @else if $direction == bottom-left {
width: 0;
height: 0;
border-style: solid;
border-width: $height 0 0 $width;
border-color: transparent transparent transparent $color;
}
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.