Вы наверняка видели похожие стрелки, как на примере выше, и если раньше мы решали подобную задачу при помощи картинки, то сейчас возможности 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
Друзья, не забывайте писать в комментариях, была ли полезна для вас статья. Это самая лучшая мотивация 🙂
Спасибо за тему, очень помог, искал долго)
рад был помочь 🙂