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

В этом испытании вам предстоит построить уже знакомую вам по части Рамки и фоны. Погружение круглую стрелку с помощью рамки.

Вам дан набор примесей, которые нужно применить для .arrow-round и его псевдоэлемента ::after. Все числовые значения примесей кратны 5 и задаются в пикселях.

Удачи!

Решение

Решение испытания будет доступно через несколько минут. Используйте его, если возникнут сложности. А пока попытайтесь пройти испытание самостоятельно.

@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 {
  .absolute-pseudo-element();
  .zero-centered();
  .size(150px, 150px);
  .round-border-line(25px);
}

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

Притормози, дружище

Проходить вызовы части «Примеси в Less» тренажёра «Инструменты автоматизации: препроцессор» можно после регистрации и оформления подписки.

Зарегистрироваться