Облачко из комиксов

В некоторых случаях сообщения (например, комментарии) удобно выводить в виде облачков, как это делается в комиксах. Рассмотрим, как это реализуется.

Создадим сразу div-класс с текстом и подсветим его, чтобы видеть результаты:


<style>
.bubble {
    border-color: #cad8d0;
    border-radius: 10px;
    background: #cad8d0;
    margin: 30px;
    padding: 30px;
    position: relative;
}
</style>
<div class="bubble">
Сообщения в стиле комиксов
</div>
Сообщения в стиле комиксов

Мы получили прямоугольник с скругленными углами. Теперь нужно добавить треугольник, чтобы получилось облачко. Добавляем стили.


.bubble: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;
}

Получаем следующее:

Сообщения в стиле комиксов
Реклама