CSS zone d'ombre autour d'une forme personnalisée?

Hy là,

J'ai besoin de créer un div qui ressemble à ceci:

capture d'écran http://imageshack.us/a/img19/8223/bubblep.png

Ce que je suis venu avec à ce jour est ceci:
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;
}

Comme vous pouvez le voir le "seul" problème est la zone d'ombre autour de la queue de la bulle (la forme triangulaire de la flèche).

J'ai aussi essayé de ne pas utiliser avant & après les pseudo-classes mais l'utilisation d'une deuxième div qui contient seulement le triangle (avec transformation, rotation, ...) mais évidemment cela ne m'a pas entraîné de pas de succès non plus.

Une image statique n'est pas une option parce que la taille du rectangle de lui-même et la position de la queue sont à la fois dynamiques et peuvent changer au cours de "l'exécution".

J'ai aussi trouvé une solution où je créer de la frontière, & l'ombre avec une dynamiquement gernerated svg. Si aucune autre option ne peut être trouvé, je vais rester avec cette solution, mais il se sent assez fort comme un "hack". Je ne suis pas l'affichage de cette solution, car elle implique 2 javascript-cadres conceptuels (extjs & raphael), et cette question devrait être d'environ html & css.
Néanmoins j'ai quand même pu la fournir si quelqu'un est intéressé...

Une dernière chose: compatibilité des navigateurs n'est pas que les grandes d'un accord. Si elle travaille dans les versions les plus récentes des grands (firefox, chrome, opera, ie 10, ...), tout est parfait 😉

Merci,

mik

InformationsquelleAutor suamikim | 2012-10-12