@color: #618ad2;
.zero-centered() { //круглая стрелка
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
.size(@width: 0px; @heigth: 0px) { //круглая стрелка
width: @width;
height: @heigth;
}
.round-border-line(@border-width: 0px) { //круглая стрелка
border: @border-width solid @color;
border-right-color: transparent;
border-radius: 50%;
}
.absolute-pseudo-element() { //треугольник
content: “”;
position: absolute;
}
.position(@top: 0px; @left: 0px) { //треугольник
top: @top;
left: @left;
}
.triangle-bottom-right(@border-width: 0px) { //треугольник
border-width: @border-width;
border-style: solid;
border-bottom-color: @color;
border-right-width: 0;
border-top-width: 0;
border-left-color: transparent;
}
.arrow-round {
.zero-centered();
.size(@width: 150px; @heigth: 150px);
.round-border-line(@border-width: 25px);
}
.arrow-round::after {
.absolute-pseudo-element();
.position(@top: -15px; @left: 110px);
.triangle-bottom-right(@border-width: 50px);
}