Подсказки в стиле «комикс» средствами CSS

Я не знаю, как правильно называется подобный стиль подсказок (в английском языке их принято величать «bubble»), но у меня они ассоциируются со стилем, который применяется в комиксах для отображения диалогов героев. Выглядит это в виде облачка со стрелочкой возле рта (надеюсь, я понятно изъясняюсь). Так, вот, сегодня я хочу показать тебе, как можно сделать подобные вещи средствами всемогущего CSS.

Для начала подготовим html разметку. Придумаем небольшой кусочек текста и обернем его в div-контейнер, к которому в свою очередь присвоим css-класс - bubble-hint. Мой код выглядит следующим образом:

<div class="bubble-hint">
Я очень люблю тусить на сайте проекта «VR-Online»
</div>

Ok, с этим разобрались. Теперь посмотрим на первый блок css-кода. В нем мы создадим прямоугольник для будущей подсказки:

.bubble-hint {
    border-color: blue;
    background: blue;
 
    margin: 30px;
    padding: 30px;
    position: relative;
}

Для класса bubble-hint я определил цвет фона и цвет рамки, а также указал размер внутренних полей и внешних отступов. Если сейчас запустить пример, то ты просто увидишь текст в синем прямоугольнике. Теперь попробуем добавить к нижней части прямоугольника ту самую стрелочку, про которую я говорил в самом начале:

.bubble-hint:after {
   content: "";
   position: absolute;
   top: 100%;
   left: 20px;
   border-top: 20px solid black; /* граница сверху элемента */
   border-top-color: inherit; /* наследуем значение родительского элемента */
   border-left: 20px solid transparent; /* левая граница элемента */
 
   border-right: 20px solid transparent;
}

Вот если сейчас запустить этот код в действии, то уже увидишь нужный результат:

Подсказка в принципе готова. Осталось только закруглить уголки. Я искал решение как это сделать, но ZeroXor напомнил мне про свойство border-radius. Его нам и не хватает для полного счастья. Итак, добавляем boder-radius:10px для класса .bubble-hint и наслаждаемся красивой подсказкой в стиле комикс.

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