¿Sombra de caja de CSS alrededor de una forma personalizada?

Question

Hy allí,

necesito para crear un div que se parece a esto:

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

Lo que he venido para arriba con hasta ahora es la siguiente: 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; 
} 

Como puede ver, el "único" problema es la sombra de caja alrededor de la cola de la burbuja (la flecha triangular).

También traté de no usar las after-pseudo-clases before-&, pero utilizo un segundo div que solo contiene el triángulo (con transformación, rotación, ...) pero obviamente eso no me llevó a ningún éxito tampoco.

Una imagen estática no es una opción porque el tamaño del rectángulo en sí y la posición de la cola son dinámicos y pueden cambiar durante el "tiempo de ejecución".

también he ocurrió una solución en la que creo la frontera & la sombra con un SVG dinámicamente gernerated. Si no se puede encontrar ninguna otra opción, me quedaré con esta solución, pero se siente bastante fuerte como un "truco". No estoy publicando esta solución aquí porque implica 2 javascript-framworks (extjs & raphael) y esta pregunta debe ser sobre html & css. No obstante yo todavía podría proporcionar si alguien está interesado en él ...

Una última cosa: Navegador-compatibilidad no es la gran cosa. Si está funcionando en las últimas versiones de los grandes (Firefox, Chrome, Opera, es decir, 10, ...) todo está bien;)

Gracias,

MIK

Answer 1

Uso de sombra paralela:

quizá this article (box-shadow-vs-filter-drop-shadow) le ayudará a

Answer 2

No es probable que en su El mejor interés para hacer esto, lo dejaría como está.

http://css-tricks.com/triangle-with-shadow/

Usted puede pasar a "The Double-Box Método" y se nota una manera muy Manual de hacer esto utilizando :before y :after (que ya ha utilizado encima de hacer la burbuja) con la ayuda de transform . Si realmente desea hacer esto, puede hacer flotar la flecha hacia la izquierda y aplicar sombras a través de los pseudo-elementos.