34 lines
1.1 KiB
Plaintext
34 lines
1.1 KiB
Plaintext
// Triangles
|
|
// --------------------------------------------------
|
|
|
|
.triangle-base() {
|
|
content: '';
|
|
display: block;
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
.triangle(@direction, @width, @height, @color) when (@direction = up) {
|
|
.triangle-base();
|
|
border-left: @width/2 solid transparent;
|
|
border-right:@width/2 solid transparent;
|
|
border-bottom: @height solid @color;
|
|
}
|
|
.triangle(@direction, @width, @height, @color) when (@direction = down) {
|
|
.triangle-base();
|
|
border-left: @width/2 solid transparent;
|
|
border-right: @width/2 solid transparent;
|
|
border-top: @height solid @color;
|
|
border-bottom-width: 0;
|
|
}
|
|
.triangle(@direction, @width, @height, @color) when (@direction = left) {
|
|
.triangle-base();
|
|
border-top: @height/2 solid transparent;
|
|
border-bottom: @height/2 solid transparent;
|
|
border-right: @width solid @color;
|
|
}
|
|
.triangle(@direction, @width, @height, @color) when (@direction = right) {
|
|
.triangle-base();
|
|
border-top: @height/2 solid transparent;
|
|
border-bottom: @height/2 solid transparent;
|
|
border-left: @width solid @color;
|
|
} |