В этой статье я хочу дать вам несколько примеров, как сделать различные простые стрелки на css.
Часто нужно быстро добавить стрелку, а дизайнера, который сделает для вас картинку под рукой нет. На выручку всегда придут css-фигуры, построенные на самых простых css-свойствах, которым также можно легко менять цвет и очертания. Добавляйте эту статью в закладки и легко копируйте нужный вид стрелок, когда они вам понадобятся. Поехали!
Стрелки-треугольники
Начнем с самых простых и незамысловатых стрелок-треугольников.
Я использовала свойство border для рисования треугольников. Основной прием заключается в том, что если вы не задавая размеры блока укажите ширину только для border, то рамки займут все пространство. При этом, если вы попробуете раскрасить каждое ребро рамки в разный цвет, то увидите, что ребра соединяются в середине образуя треугольники. Если оставить все ребра кроме одного прозрачными, то мы получим треугольник.
Стрелки-уголки
Немного более сложные в css, но все такие же простые на вид cтрелки-уголки.
Здесь я также использовала свойство border, задав только верхнее и боковое ребро. А затем повернув с помощь transform rotate в нужную сторону. Вы легко можете менять ширину с помощью изменения толщины border и размер с помощью изменения свойств width и height.
Стрелки-уголки в кружочках
Если нужны более выделенные стрелки с изменением фона при наведении, то подойдут стрелки-уголки, обрамленные в круг.
Чтобы сделать круглую форму я использовала свойство border-radius со значение 50%. Внутренние стрелки я сделала точно таким же подходом, как предыдущие, но вписала их внутрь круга, расположив внутри псевдо-элемента ::before и используя абсолютное позиционирование.
Стрелки-треугольники в кружочках
Еще одна модификация этих же стрелок с использованием треугольников из первого примера во псевдо-элементах.
Стрелки-стрелы
Такие стрелки могут пригодится не только в галереях, но и для обозначения различных направлений, переходов и много другого. В этом примере снова используются псевдо-элементы и рамки для создания уголков.
Не хватило какой-то стрелки или знаете как что-то можно сделать проще? Приходите в комментарии и предлагайте свои варианты, расширим коллекцию простых стрелок на CSS.
Если у вас остались вопросы, вы можете воспользоваться формой для связи или оставить комментарий ниже.
Этот сайт использует Cookie Мы используем файлы cookie для персонализации контента и рекламы, предоставления функций социальных сетей и анализа нашего трафика. Мы также передаем информацию об использовании вами нашего сайта нашим партнерам по социальным сетям, рекламе и аналитике, которые могут объединять ее с другой информацией, которую вы им предоставили или которую они собрали в результате использования вами их услуг.x