Define a trigonometric function to achieve triangular compatibility in different directions IE6
The first parameter passes in the direction of
The second parameter passes in the size of
The third parameter passes in a color
Note: The middle of the incoming parameter must be separated by commas
@mixin triangle ($x, $y: 10px, $z: white) {
@if $x = = "Top" {
Border-width: $y;
Border-color:transparent transparent $z transparent;
Border-style:dashed dashed solid dashed;
}
@else if $x = = "Bottom" {
Border-width: $y;
Border-color: $z transparent transparent transparent;
Border-style:solid dashed dashed dashed;
}
@else if $x = = "Left" {
Border-width: $y;
Border-color:transparent $z Transparent transparent;
Border-style:dashed solid dashed dashed;
}
@else if $x = = "Right" {
Border-width: $y;
Border-color:transparent Transparent transparent $z;
Border-style:dashed dashed dashed solid;
}
width:0;
height:0;
Overflow:hidden;
}
. box{
@include Triangle (right, 200px, red);
}
Scss to achieve triangles in different directions