Как добавить крошечный треугольник внизу всплывающего элемента, который появляется при наведении курсора на ссылку?

Question

Иногда, когда я наводю курсор на изображения, а что нет, я вижу крошечный треугольник, связывающий всплывающее окно с его изображением. Например, маленький треугольник рядом с вашим именем пользователя в центре верхней части страницы stackoverflow. Как я могу это сделать? Используете ли вы CSS3 для этого? Спасибо.

Answer 1

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

ознакомьтесь с объяснением здесь .и живое демо здесь

Answer 2

Символ Unicode U+25BC - это сплошной треугольник, направленный вниз: ▼.Вы также можете найти блочные элементы html, чтобы они выглядели как треугольники, задав им ширину и высоту ноль и применив специальные свойства границы к трем сторонам элемента.Этот метод известен как CSS треугольник взломать .

Answer 3

Используйте это в своем источнике HTML: ▾

Результат вы можете увидеть здесь: ▾

Или здесь .

Answer 4

Вот и все - это Символ Юникода . Полный график в Википедии окончен.