/*
* Mixin for basic CSS triangles
* @include triangle(up, #000, 50px);
* @include triangle(bottomleft, #000, 50px);
*/
@mixin triangle($direction:up, $color:#000, $size:100px) {
@if ($direction == up){
border-color: transparent transparent $color;
border-style: solid;
border-width: 0 $size $size;
height: 0;
width: 0;
}
@if ($direction == down) {
border-color: $color transparent transparent transparent;
border-style: solid;
border-width: $size;
height: 0;
width: 0;
}
@if ($direction == left) {
border-color: transparent $color transparent transparent;
border-style: solid;
border-width: $size $size $size 0;
height: 0;
width: 0;
}
@if ($direction == right) {
border-color: transparent transparent transparent $color;
border-style: solid;
border-width: $size 0 $size $size;
height: 0;
width: 0;
}
@if ($direction == bottomright) {
border-color: transparent transparent $color transparent;
border-style: solid;
border-width: 0 0 $size $size;
height: 0;
width: 0;
}
@if ($direction == bottomleft) {
border-color: transparent transparent transparent $color;
border-style: solid;
border-width: $size 0 0 $size;
height: 0;
width: 0;
}
@if ($direction == topleft) {
border-color: $color transparent transparent transparent;
border-style: solid;
border-width: $size $size 0 0;
height: 0;
width: 0;
}
@if ($direction == topright) {
border-color: transparent $color transparent transparent;
border-style: solid;
border-width: 0 $size $size 0;
height: 0;
width: 0;
}
}
// Quelle: https://css-tricks.com/snippets/sass/css-triangle-mixin/ (siehe vorletzten Kommentar)
