html - irregular - ¿CSS caja de sombra alrededor de una forma personalizada?

shapes html

Question

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

Answer 1

Probablemente no sea lo mejor para usted hacer esto, lo dejaría como está.

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

Puede pasar directamente al "Método de caja doble" y se muestra una forma muy manual de hacerlo usando :before y :after (que ya usó para hacer la burbuja) con la ayuda de transform . Si realmente quisieras hacer esto, podrías hacer flotar la flecha hacia la izquierda y aplicar sombras a través de los pseudo elementos.

Answer 2

Utilice sombra paralela:

quizás este artículo (box-shadow-vs-filter-drop-shadow) te ayude