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

[zerkms]

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

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

[cybri0nix]

Люди, имеющие опыт в разметке, поймут

[zerkms]

Людям, имеющим опыт в разметке, этого и объяснять совсем не нужно, если уж на то пошло.

[dshster]

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

jsfiddle.net/dmitry_shvalyov/z5ehT/

[mac2000]

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

[Seldon]

Спасибо за незабываемый урок которому уже наверное года 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/

[cybri0nix]

О каких сложных вещах написать?

[Seldon]

Хотя бы о тем которые уже не были упомянуты на хабре раз 10

[niko83]

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

[cybri0nix]

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

Для lt IE8 можно сделать границу, а чтобы сделать границу у треугольника, нужно подложить под него треугольник цвета границы, с шириной границ на 1px больше (зависит от толщины границ)

[Niksg]

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

[SerDIDG]

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. Что не статья о цсс\хтмл из песочницы, то яркий пример как делать не стоит.

[cybri0nix]

2-4 — субъективно