CSS Speech Bubble con Box Shadow
Creando un DIV que usa CSS para dibujar un triángulo a la izquierda. Intentando aplicar una sombra de cuadro uniforme tanto al padre como al pseudo elemento (ver imágenes) y al código.
¿Es posible? ¿O es mejor usar border-image para esto?
(Arriba: Antes de la sombra, Medio: CSS Box-Shadow, Abajo: Resultado deseado)
.bubble{
height: 200px;
width: 275px;
opacity: 0;
margin-top: 41px;
float: right;
background-color: #F2F2F2;
-webkit-border-radius: 5px;
-webkit-box-shadow: 0px 0px 6px #B2B2B2;
}
.bubble::after {
height: 0px;
width: 0px;
content: "\00a0";
display: block;
margin-left: -10px;
margin-top: 28px;
border-width: 10px 10px 10px 0;
border-style: solid;
border-color: transparent #F2F2F2 transparent transparent;
-webkit-box-shadow: 0px 0px 6px #B2B2B2;
}