Burbuja de Discurso CSS con Sombra de Caja

Aquí hay un ejemplo de trabajo completo en CSS completo, con variables para el tamaño de la nariz ancho de sombra y un borde opcional.

El truco es obtener las compensaciones y transformar correctamente para lograr la perfección de píxeles, y usar overflow:hidden según sea necesario para cortar la nariz de su burbuja (especialmente si necesita bordes).

El ejemplo de la respuesta anterior no funciona para nosotros porque la sombra se recorta y se coloca sobre el área de la burbuja principal.

Se degrada con gracia en IE7 / 8.

HTML:

<div class="chat">
    <div class="bubble">
        <span class='tail'>&nbsp;</span>
        <p>The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's keeper and the finder of lost children.</p><p>And I will strike down upon thee with great vengeance and furious anger those who would attempt to poison and destroy My brothers. And you will know My name is the Lord when I lay My vengeance upon thee.</p>
    </div>
</div>

SCSS:

$shadow_radius = 6px;
$nose_size = 12px;
$shadow = 0 1px $shadow_radius #B2B2B2;
$border =  1px solid #bbb

.chat {
    font-family:      sans-serif;
    font-size:        small;
}

.bubble {
    background-color: #F2F2F2;
    border-radius:    5px;
    border:           $border;
    box-shadow:       $shadow;
    display:          inline-block;
    padding:          10px 18px;
    margin-left:     ($shadow_radius + $nose_size);
    margin-right:    ($shadow_radius + $nose_size);
    position:         relative;
    vertical-align:   top;
}

.tail {
    position: absolute;
    top:      $nose_size;
    left:   -($shadow_radius + $nose_size);
    height:  ($shadow_radius + $nose_size);
    width:   ($shadow_radius + $nose_size);
    overflow: hidden;
}
.tail:before {
    border:            $border;
    background-color:  #F2F2F2;
    box-shadow:        $shadow;
    content:           "\00a0";

    display:           block;
    position:          absolute;
    top:               0px;
    left:              $nose_size;
    height:            $nose_size;
    width:             $nose_size;
    -webkit-transform: skew( -45deg );
    -moz-transform:    skew( -45deg );
}

Sé que es un poco complicado, pero me parece agradable. Aquí está el violín http://jsfiddle.net/dzfj6/

HTML

<div class="bubble">
    <div class="triangle"></div>
    <div class="border"></div>
    <div class="content">some content</div>
</div>

CSS

.bubble
{
    height: 200px;
    width:  275px;
    float:right;
    margin-top: 41px;
    margin-left:11px;
    background-color: #f2f2f2;
    -webkit-border-radius: 5px;
    -webkit-box-shadow: 0px 0px 5px #b2b2b2;
    position:relative;
    z-index:1;
}

.triangle
{
   position:absolute;
   top:12px;
   width: 0;
   height: 0;
   border-top: 15px solid transparent;
   border-bottom: 15px solid transparent;
   border-right: 10px solid #f2f2f2;
   margin-left:-9px;
   z-index:3;
}
.border
{        
   position:absolute;
   top:12px;
   width: 0;
   height: 0;
   border-top: 15px solid transparent;
   border-bottom: 15px solid transparent;
   border-right: 10px solid #e0e0e0;
   margin-left:-10px;
   z-index:2;
}

.content{
   padding:10px;
}

En lugar de box-shadow, simplemente puede usar border para buble.

Otra solución es usar filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); Solo coloca la sombra alrededor de la forma de los objetos.

No use box-shadow.

 height: 200px;
    width:  275px;
    float:right;
    margin-top: 41px;
    margin-left:11px;
    background-color: #f2f2f2;
    -webkit-border-radius: 5px;
    -webkit-box-shadow: 0px 0px 5px #b2b2b2;
    position:relative;
    z-index:1;