Dionisiy Jan 13 2012 at 18:00

Оформление тултипов со стрелками на CSS с помощью символов

4 min

36K

CSS *

From sandbox

+32

Comments 20

UFO just landed and posted this here

scipe Jan 13 2012 at 19:08

Довольно старая идея) Но все равно, спасибо! Напомнили :)

FTDeBUGgeR Jan 13 2012 at 19:17

Android habrastorage.org/storage2/044/b89/a5c/044b89a5c2e9499fedc76e3e7fe740d2.jpg

Dionisiy Jan 16 2012 at 12:38

Ха, а в Андроиде просто нет символов ► и ◄ (треугольных стрелок влево и вправо), задача усложняется.

zim32 Jan 13 2012 at 19:38

Извините что придираюсь, но 0x25C4 это никак не ASCII символ, скорее Unicode

Dionisiy Jan 14 2012 at 22:58

Вы не придираетесь, а совершенно правы! Переименовал статью.

UFO just landed and posted this here

iamo0 Jan 13 2012 at 19:46

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

Dionisiy Jan 13 2012 at 22:46

Спасибо за перечисление недостатков технологии, они известны, поэтому я нигде и не отмечал, что этот метод отличается универсальностью и гибкостью. Целью было показать возможность использования.

Для определенных задач этот метод более чем достаточен, и я выбираю его.

zaartix Jan 14 2012 at 06:18

Отдельное спасибо за jsfiddle ) Не знал про такой клевый сервис.

pepelsbey Jan 14 2012 at 16:57

Жаль, что вы не знаете, как работают браузерные префиксы. Не для рекламы, посмотрите видео: -Пре-фиксы: зачем и как правильно (подсказка: обратный порядок)

pepelsbey Jan 14 2012 at 17:00

И когда кто-нибудь из браузеров дропнет префикс, то ваш градиент никто не увидит. Забыли написать вариант без префикса: background-image: linear-gradient(#2CA0CA 0%, #3EB8E5 100%);