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

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

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

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

Итак, HTML:

<div class="characters">ваш контент</div>

CSS:

.characters {
  background-color: #fff;
  border-bottom: 7px solid #ffd434;
  position: relative;
}

.characters::after {
  border: medium solid transparent;
  content: "";
  top: 100%;
  left: 50%;
  position: absolute;
  height: 0;
  width: 0;
  border-color: #ffd434 rgba(255, 212, 52, 0) rgba(255, 212, 52, 0);
  border-width: 25px;
  margin-left: -25px;
}

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

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

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

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

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

<div class="client-quote">
  "Suspendisse posuere dignissim et eratim actis sodales. Indec nes eros risus. Integer etsus it fringilla euismod aliquet. Aliqua netsum egestas, net massa hictris tenetur item netis aliquet sapiens."
  <span class="arrow-bot-green"></span>
</div>

CSS:

.client-quote {
  background-color: #f5f5f5;
  border-bottom: 2px solid #03d7ab;
  border-radius: 5px;
  color: #656565;
  font-family: open-sans,sans-serif;
  font-size: 14px;
  font-style: italic;
  font-weight: 300;
  line-height: 21px;
  padding: 25px 30px;
  position: relative;
  text-align: left;
}

.arrow-bot-green {
  background-color: #f5f5f5;
  border-bottom: 1px solid #03d7ab;
  border-left: 1px solid #03d7ab;
  bottom: -1px;
  display: inline-block;
  height: 12px;
  left: 50px;
  position: absolute;
  transform: matrix(0.7071, -0.7071, 0.7071, 0.7071, -2, 6);
  width: 12px;
  z-index: 2;
}

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

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

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

автор: Dmitriy

З 2011 року займаюся веб-розробкою. Зараз я – PHP Full Stack Developer.
Обговорити ваш проект, а також дізнатися більше про мене ви можете на цьому сайті:
dev.forwww.com

Email: dmitriyribka@gmail.com

2 коментаря

Залишити відповідь