Как сделать ссылку со стрелкой
Оформление тултипов со стрелками на CSS с помощью символов
Тема уже достаточно избитая, но хочу поделится своим методом. Технологию придумал сам, на оригинальность не претендую, хотя пока что не встречал описание подобной техники.
Итак, стоит задача — сделать красивый тултип со стрелками на CSS.
Вариант с картинками рассматривать не будем, воспользуемся псевдоэлементами :before и :after.
Недавно здесь уже рассматривали такую технологию и использованием CSS-трансформаций:
http://habrahabr.ru/blogs/css/136061/
Я предлагаю другой способ — использование символов.
Первоначальный вариант статьи рассматривал использование символов ►, ◄, ▲, ▼, но, как верно заметил FTDeBUGgeR, на Андроиде все рассыпалось. Проблема оказалось банальной: в шрифтах под Андроид просто нет стрелок влево (►) и вправо (◄).
Отступать было некуда, и я решил использовать стрелки ↑, ↓, → и ←, который были и на Андроиде. Но тут внезапно под руку подвернулась бубновая масть — ведь этого символа достаточно для стрелок всех направлений! Кроме того, стрелки ↑, ↓, → и ← большого размера на самом деле не острые, а на Андроиде вообще имеют закругленные концы.
Поэтому будем рисовать «бубновые» тултипы.
Для начала оформим сам блок тултипа с красивым градиентным фоном, бордером и тенью:
В нашем примере мы будем использовать 2 CSS класса — ‘tooltip’ для общих свойств, а также для наглядности отдельные классы стрелок различного направления, например, ‘leftArrow’.
Далее добавим наши стрелки. Псевдоэлементы будут иметь свойство content с 16-ным кодом символа для его отображения.
Если необходим блок без бордеров, то задача упрощается и достаточно использовать один псевдоэлемент, например, :before.
Также запретим выделение нашей текстовой стрелки через user-select:
Сам символ располагается по центру блока 50х50 пикселей, а, используя свойство clip, мы будем отсекать часть символа, тем самым образуя именно треугольный блок стрелки нужного направления.
Главная трудность состоит в определении абсолютных координат наших псевдоэлементов, хотя с помощью FireBug’а можно быстро подобрать необходимый размер стрелки через font-size и спозиционировать элемент. Важно сместить «фоновую» стрелку так, чтобы она прикрыла бордер блока.
Также условимся, что нам необходимо иметь стрелку по центру края. Для этого используем 50% позиционирования по top или left, а также отрицательный margin в половину высоты или ширины блока соответственно.
Кстати первоначальный вариант использовал em, а не px в качество единиц размеров, но всеми любимая Opera катастрофически отказывалась понимать clip в em’ах, поэтому пришлось использовать px.
Здесь мы рассмотрим создание стрелки влево, в конце статьи есть ссылка на примеры для всех 4х вариантов стрелок (влево, вправо, вниз и вверх).
Собственно говоря, вот и все, встречаем «козырный бубновый тултип»: 
Для IE просто добавляем PIE, чтобы увидеть красоту (закругленные углы, тени и градиентный фон).
Остался минус — на левой и правой стрелках нельзя показать вертикальный градиент фона тултипа, но это не всегда заметно, а на тултипах с монотонным цветом фона и вообще не минус.