5 способов сделать простые стрелки на CSS

Статья с примерами кода: oros-it.ru/blog/simple-arrows...
В этом видео я покажу как создать пять разных стрелок на чистом CSS всего из двух HTML-элементов.
00:00 Введение
00:34 Стрелки-треугольники
02:37 Стрелки-уголки
05:24 Стрелки-уголки в кружочках
09:48 Стрелки-треугольники в кружочках
11:45 Стрелки-стрелы
15:36 Заключение
Мы публикуем много других материалов, подписывайте, чтобы ничего не пропустить:
Telegram-канал: t.me/ITbesedka
SoundCloud: / itl-cast

[@sgh9533]

Супер спасибо

[@user-fm3nl8te7p]

Большое спасибо, стрелочки у меня получились :)

[@sailoks8411]

Спасибо за ролик, очень полезный!

[@IT-besedka]

Рады, что вам пригодился!

[@Gorvac]

Спасибо огромное!!!! Ещё бы добавить в этот видос, как изменить остроту угла стрелки.

[@IT-besedka]

Пользуйтесь на здоровье!

[@user-cq9ze8rk8s]

Спасибо очень помогло

[@user-qb5in9dv2l]

Круто

[@sprutgym2001]

спасибо.отличное видео. как раз хотел сделать стрелку на css а не подключать шрифты

[@IT-besedka]

Рада, что видео вам помогло!

[@andynaz7044]

А зачем???

[@user-kr8rh1qu7v]

подскажите пожалуйста, как бегунок заменить на стрелки

[@user-rm1ol5xk1f]

скажите пожалуйста как добавить hover к этим стрелкам?

[@IT-besedka]

Посмотрите в исходном коде, я добавила всем стрелкам hover: oros-it.ru/blog/simple-arrows-with-help-of-css

[@dd-mx7si]

а можно ли накинуть на неё чтоб при наведении цвет менялся на другой

[@IT-besedka]

В каком именно варианте стрелки?

[@user-ie2ci1cl3c]

Добрый день! А при позиционировании псевдоэлементов внутри круга, откуда берется top:6px; left: 7px; Можно это высчитать более надежно? пробовала через например: transform: translate(-50%, -50%) rotate(45deg);
left: 50%;
top: 50%; в одном случае срабатывает, в другом нет. Не пойму почему.

[@IT-besedka]

Можно сделать так, заменить эти значения вместо тех, что уже есть в коде:
.left-arrow,
.right-arrow {
--width: 20px;
--height: 20px;
--arrow-width: 6px;
--arrow-height: 6px;
--arrow-border: 2px;
}
.left-arrow::before,
.right-arrow::before {
width: var(--arrow-width);
height: var(--arrow-height);
}
.left-arrow::before {
top: calc((var(--height) - var(--arrow-height) - var(--arrow-border) / 2) / 2);
left: calc((var(--width) - var(--arrow-width)) / 2);
border-top: var(--arrow-border) solid white;
border-left: var(--arrow-border) solid white;
transform: rotate(-45deg);
}
.right-arrow::before {
top: calc((var(--height) - var(--arrow-height) - var(--arrow-border) / 2) / 2);
right: calc((var(--width) - var(--arrow-width)) / 2);
border-top: var(--arrow-border) solid white;
border-right: var(--arrow-border) solid white;
transform: rotate(45deg);
}
Тогда можно будет менять значения переменных и все автоматически будет меняться. Но читаемость у этого не на высшем уровне.

[@user-ie2ci1cl3c]

@@IT-besedka спасибо, попробую!