Stackoverflow - CSS Speech Bubble with Box Shadow

http://stackoverflow.com/q/8866736/918414

HTML

<div class="chat">
    <div class="bubble me"><span class='tail'>&nbsp;</span>Hello there! Here's some more text for your bubble. And here's a bit more text so that wrapping happens.</div>
            
            
            
            




    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
























































































































    
<script>

/* by: thinkingstiff.com
license: http://creativecommons.org/licenses/by-nc-sa/3.0/us/ */

var headerUri = 'http://stackoverflow.com/q/8866736/918414',
    headerCaption = 'CSS Speech Bubble with Box Shadow';
    
document.body.insertAdjacentHTML( 
    'afterBegin',
      '<a href="' + headerUri + '" '
    + 'target="_top" '
    + 'onmouseover="this.style.opacity=\'.95\'" '
    + 'onmouseout="this.style.opacity=\'1\'" '
    + 'style="'
        + 'background-color: black;'
        + 'background-image: linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
        + 'background-image:...

CSS

.bubble {
    background-color: #F2F2F2;
    border-radius: 5px;
    box-shadow: 0 0 6px #B2B2B2;
    display: inline-block;
    padding: 10px 18px;
    position: relative;
    vertical-align: top;
}

.tail {
    //box-sizing: border-box;
    //border:1px dotted red;
    position: absolute;
    top: 12px;
    left: -18px;
    height: 18px;
    width:18px;
    overflow:hidden;
}
.tail:before {
    //box-sizing: border-box;
    //border:1px dotted green;
    background-color: #F2F2F2;
    box-shadow: 0 0 6px #B2B2B2;
    content: "\00a0";

    display: block;
    position: absolute;
    buttom: 0px;
    right: 12px;
    height: 12px;
    width:  12px;
    
   
    -webkit-transform: skew( -45deg );
}

.me {
    float: right;   
    margin: 5px 45px 5px 20px;         
}