Hy dort,

Ich muss ein Div erstellen, das so aussieht:

Screenshot http://imageshack.us/a/img19/8223/bubblep.png

Was mir bisher eingefallen ist: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;
}

Wie Sie sehen können, ist das "einzige" Problem der Kastenschatten um den Schwanz der Blase (der dreieckige Pfeil).

Ich habe auch versucht, keine Vorher- und Nachher-Pseudoklassen zu verwenden, sondern ein zweites Div, das nur das Dreieck enthält (mit Transformation, Rotation, ...), aber das hat mich natürlich auch nicht zu keinem Erfolg geführt.

Ein statisches Bild ist keine Option, da sowohl die Größe des Rechtecks ​​selbst als auch die Position des Endes dynamisch sind und sich während der "Laufzeit" ändern können.

Ich habe auch eine Lösung gefunden, bei der ich den Rand und den Schatten mit einem dynamisch generierten SVG erstelle. Wenn keine andere Option gefunden werden kann, bleibe ich bei dieser Lösung, aber sie fühlt sich ziemlich stark an wie ein "Hack". Ich poste diese Lösung hier nicht, da es sich um 2 Javascript-Framworks (extjs & raphael) handelt und diese Frage sich um HTML & CSS handeln sollte. Trotzdem könnte ich es immer noch zur Verfügung stellen, wenn sich jemand dafür interessiert ...

Eine letzte Sache: Browser-Kompatibilität ist keine große Sache. Wenn es in den neuesten Versionen der Großen (Firefox, Chrome, Opera, dh 10, ...) funktioniert, ist alles in Ordnung;)

Vielen Dank,

mik