x

Добро пожаловать в IT Leader Assistant.
Please Войти!

Создать аккаунт

Как сделать простые стрелки на CSS

Александра Шаламова
04-19-2021 12:12
Как сделать простые стрелки на CSS

Для тех кому удобнее видео-формат

В этой статье я хочу дать вам несколько примеров, как сделать различные простые стрелки на css.
Часто нужно быстро добавить стрелку, а дизайнера, который сделает для вас картинку под рукой нет. На выручку всегда придут css-фигуры, построенные на самых простых css-свойствах, которым также можно легко менять цвет и очертания. Добавляйте эту статью в закладки и легко копируйте нужный вид стрелок, когда они вам понадобятся. Поехали!

Стрелки-треугольники

Начнем с самых простых и незамысловатых стрелок-треугольников.
Я использовала свойство border для рисования треугольников. Основной прием заключается в том, что если вы не задавая размеры блока укажите ширину только для border, то рамки займут все пространство. При этом, если вы попробуете раскрасить каждое ребро рамки в разный цвет, то увидите, что ребра соединяются в середине образуя треугольники. Если оставить все ребра кроме одного прозрачными, то мы получим треугольник.

Стрелки-уголки

Немного более сложные в css, но все такие же простые на вид cтрелки-уголки.
Здесь я также использовала свойство border, задав только верхнее и боковое ребро. А затем повернув с помощь transform rotate в нужную сторону. Вы легко можете менять ширину с помощью изменения толщины border и размер с помощью изменения свойств width и height.

Стрелки-уголки в кружочках

Если нужны более выделенные стрелки с изменением фона при наведении, то подойдут стрелки-уголки, обрамленные в круг.
Чтобы сделать круглую форму я использовала свойство border-radius со значение 50%. Внутренние стрелки я сделала точно таким же подходом, как предыдущие, но вписала их внутрь круга, расположив внутри псевдо-элемента ::before и используя абсолютное позиционирование.

Стрелки-треугольники в кружочках

Еще одна модификация этих же стрелок с использованием треугольников из первого примера во псевдо-элементах.

Стрелки-стрелы

Такие стрелки могут пригодится не только в галереях, но и для обозначения различных направлений, переходов и много другого. В этом примере снова используются псевдо-элементы и рамки для создания уголков.
Не хватило какой-то стрелки или знаете как что-то можно сделать проще? Приходите в комментарии и предлагайте свои варианты, расширим коллекцию простых стрелок на CSS.
Если у вас есть какие-то вопросы или пожелания вы можете воспользоваться формой для связи с нами:

Комментарии

Чтобы оставить комментарий, пожалуйста, авторизуйтесь

Подписывайтесь на обновления

Последние статьи из нашего блога