Испытание: круглая стрелка с помощью рамки

Курсы §37. Примеси в LESS
1

Если вдруг кому нужна будет подсказка. Честно признаюсь, сделал на 50% манки методом, поэтому могут быть плохие практики.

Суть заключается в добавлении блоку и его псевдоэлементу нужных примесей, сами свойства меняются непосредственно в примесях.

@color: #618ad2;

.zero-centered() {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}

.size(@width: 150px; @height: 150px) {
width: @width;
height: @height;
}

.round-border-line(@border-width: 25px) {
border: @border-width solid @color;
border-right-color: transparent;
border-radius: 50%;
}

.absolute-pseudo-element() {
content: “”;
position: absolute;
}

.position(@top: -15px; @left: 110px) {
top: @top;
left: @left;
}

.triangle-bottom-right(@border-width: 50px) {
border-width: @border-width;
border-style: solid;
border-top-width: 0;
border-right-width: 0;
border-bottom-color: @color;
border-left-color: transparent;
}

.arrow-round {
.zero-centered();
.size();
.round-border-line;

}

.arrow-round::after {
.absolute-pseudo-element();
.triangle-bottom-right;
.position;
}

2 лайка
2

@color: #618ad2;

.zero-centered() {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}

.size(@width: 0px; @height: 0px) {
width: @width;
height: @height;
}

.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-top-width: 0;
border-right-width: 0;
border-bottom-color: @color;
border-left-color: transparent;
}

.arrow-round {
.zero-centered();
.size(@width: 150px; @height: 150px);
.round-border-line(@border-width: 25px);
}

.arrow-round::after {
.absolute-pseudo-element();
.position(@top: -15px; @left: 110px);
.triangle-bottom-right(@border-width: 50px);
}