Привет,

Мне нужно создать div, который выглядит следующим образом:

скриншот http://imageshack.us/a/img19/8223/bubblep.png

Что я придумал, так это:http://jsfiddle.net/suamikim/ft33k/

.bubble {
    position: relative;
    width: 80px;
    height: 160px;
    border: 1px solid #33A7F4;
    border-radius: 9px;
    margin: 100px;
    -webkit-box-shadow: 0px 0px 20px 2px #33A7F4;
    -moz-box-shadow: 0px 0px 20px 2px #33A7F4;
    -ms-box-shadow: 0px 0px 20px 2px #33A7F4;
    -o-box-shadow: 0px 0px 20px 2px #33A7F4;
    box-shadow: 0px 0px 20px 2px #33A7F4;

}

.bubble:after, .bubble:before {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    border: 17px solid transparent;
    right: 100%;
}

.bubble-left:before {
    border-top-color: #33A7F4;
    border-right-color: #33A7F4;
    top: 60px;
}

.bubble-left:after {
    border-width: 16px;
    border-top-color: black;
    border-right-color: black;
    top: 61px;
}

Как видите, «единственной» проблемой является тень от ящика вокруг хвоста пузыря (треугольная стрелка).

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

Статическая картинка не подходит, потому что размер самого прямоугольника и положение хвоста являются динамическими и могут изменяться во время «выполнения».

Я также придумал решение, в котором я создаю границу и тень с помощью динамически прорисованного SVG. Если другого варианта найти не удастся, я буду придерживаться этого решения, но оно выглядит довольно сильным, как «взлом». Я не публикую здесь это решение, потому что оно включает 2 javascript-framworks (extjs & raphael), и этот вопрос должен быть о html & css. Тем не менее, я мог бы предоставить это, если кто-то заинтересован в этом ...

И последнее: совместимость с браузерами не такая уж большая проблема. Если он работает в последних версиях больших (Firefox, Chrome, Opera, то есть 10, ...) все в порядке;)

Спасибо,

МИК