¿Caja de CSS con sombra alrededor de una forma personalizada?
Hy allí,
Necesito crear un div que se vea así:
captura de pantalla http://imageshack.us/a/img19/8223/bubblep.png
Lo que se me ha ocurrido hasta ahora es esto: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 problema "único" es la sombra de la caja alrededor de la cola de la burbuja (la flecha triangular).
También traté de no usar las pseudo-clases anteriores y posteriores, pero usar un segundo div que solo contiene el triángulo (con transformación, rotación, ...) pero obviamente eso tampoco me llevó a ningún éxito.
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 se me ocurrió una solución donde creo el borde y la sombra con un svg gernerado dinámicamente. Si no se puede encontrar otra opción, me quedo con esta solución, pero se siente bastante fuerte como un "hack". No estoy publicando esta solución aquí porque involucra 2 javascript-framworks (extjs y raphael) y esta pregunta debería ser sobre html y css. Sin embargo, todavía podría proporcionarlo si alguien está interesado en él ...
Una última cosa: la compatibilidad con el navegador no es tan importante. Si está funcionando en las últimas versiones de las grandes (Firefox, Chrome, Opera, es decir, 10, ...) todo está bien;)
Gracias,
mik