Как сделать стрелку вниз на CSS

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

Как сделать стрелку на CSS используя псевдоэлемент ::after

В принципе, данным способом можно сделать стрелку не только вниз, но и куда вам будет угодно. Итоговый вид нашего кода:

Итак, HTML:

CSS:

Внимательно посмотрите на код, что вы должны тут увидеть — родительскому блоку мы задаем position: relative а самому псевдоэлементу ::after — абсолютное позиционирование. Также важно задать пустой контент и указать цвет в rgba, напомню, четвертый параметр отвечает за прозрачность (допустимые значения 0-1, например, 0.5 и т.д.) и задаем ширину рамки (border) и такой же отступ влево, только отрицательный.

Кстати говоря, а вы знали чем отличается :after от ::after? Оказывается вообще ничем, просто с некоторыми обновлениями CSS3 добавили еще одно двоеточие, поэтому когда вы пишите :after браузер автоматически дописывает ему «:» и получаем в итоге ::after (проверял в фаербаге, мозилла). Скорей всего, это было для сделано для удобства, чтобы выделить как-то псевдо-элементы от обычных «состояний», таких как :focus, :active, :hover.

Как сделать стрелку на CSS при помощи transform

То, что получим в итоге, используя второй способ:

Без долгих лирических вступлений, HTML:

CSS:

Этот вариант, как по мне, тоже неплохой. Посмотрите какую форму принял элемент span (в фаербаге, например) — похоже на ромб или перевернутый квадрат 🙂 . И это один из немногих вариантов использования transform.

Вот такие способы создания стрелок вы сегодня узнали. Если хотите, есть один онлайн-генератор, который сэкономит вам гору времени:
cssarrowplease.com

Друзья, не забывайте писать в комментариях, была ли полезна для вас статья. Это самая лучшая мотивация 🙂

автор: Dmitriy

Занимаюсь веб-разработкой с 2011 года. Посмотреть некоторые из моих работ, а также узнать чуть больше обо мне, вы можете на forwww.com/dmitriy/.

Какие услуги предоставляю:
- Создание сайтов, шаблонов и компонентов на 1С-Битрикс;
- Разработка функционала с нуля и доработка кода на уже созданных проектах;
- Адаптивная вёрстка макетов и натяжка на Битрикс;
- Парсинг файлов и выгрузка на сайт (форматы - CSV, XML, XLSX, JSON)
- Интеграции со сторонними сервисами по API;
- Многоязычные версии и многое другое.

Если у вас остались вопросы, свяжитесь со мной любым удобным для вас способом или оставьте комментарий внизу.
E-mail: dmitriyribka@gmail.com
Skype: cinemacreaterus

2 комментария

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *