Balloon средствами CSS

Для `height:0;width:0;` картинку, вероятно, лучше было бы перерисовать.

Потому что не совсем очевидно, почему при таких параметрах справа появляется треугольник.

А почему бы не использовать селектор :after/content для создания стрелки? Если уж переходить на css, то избавляться декоративных от тегов:

jsfiddle.net/dmitry_shvalyov/z5ehT/

Действительно :before помог бы реализовать тот же эффек но уже без лишних элементов (правда не во всех браузерах), плюс эта методика не годиться если заказали балуны с тенями

Спасибо за незабываемый урок которому уже наверное года 4.
habrahabr.ru/post/107259/
nicolasgallagher.com/pure-css-speech-bubbles/
stackoverflow.com/questions/8866736/css-speech-bubble-with-box-shadow
www.sitepoint.com/pure-css3-speech-bubbles/

Хватит постить простейшие вещи которые уже многие года все используют!

А про фигуры на css читаем тут habrahabr.ru/post/126207/

Когда я делал такой balloon, у меня возникла проблема. Не получалось сделать нормальную тень. Тень от треугольника накладывалась на тело пузыря. Был бы признателен если модернизируете свой пример чтоб такое пузырь содержал тень. Пузырь ведь находится над плоскостью сайта и должен отбрасывать тень. Спасибо.

В первых двух примерах выравнивание что-то не совсем по-вертикали…

1. Так писать не стоит, что хром что лиса уже как пару лет использует эти атрибуты без префиксов.
-webkit-border-radius:6px; -moz-border-radius:6px; border-radius:6px;
-moz-box-shadow:-8px 0 7px #555; -webkit-box-shadow:-8px 0 7px #555; box-shadow:-8px 0 7px #555;

2. Не стоит писать единицы измерения, если указываете 0.
width: 0px;

3. Что за крайней не уклюжий стиль написания цсс в комбинированном виде? Одни правила идут столбик, другие в строчку.

4. Что не статья о цсс\хтмл из песочницы, то яркий пример как делать не стоит.