CSS speech bubbles (.net)

Using pseudo-elements to create a speech bubble effect without images or presentational HTML. Could just as easily be used to present client testimonials, blog comments, tooltips, etc.

by Ken Z

HTML

<div class="quote">
    <blockquote><p>If you spend too much time thinking about a thing, you will never get it done.</p></blockquote>
    <p class="credit">Bruce Lee</p>
</div>

CSS

body {
    background:#e5e5e5;   
}

.quote {
    position:relative;
    width:300px;
    padding:15px 25px 20px;
    margin:20px auto;
    font:italic 26px/1.4 Georgia, serif;
    color:#fff;
    background:#245991;
}

.quote:after {
    content:"";
    position:absolute;
    top:100%;
    right:25px;
    border-width:30px 30px 0 0;
    border-style:solid;
    border-color:#245991 transparent;
    /* css3 extras */
    -webkit-transform:skewX(-15deg);
       -moz-transform:skewX(-15deg);
        -ms-transform:skewX(-15deg);
         -o-transform:skewX(-15deg);
            transform:skewX(-15deg);
}

.credit {
    margin:1em 0 0;
    font:14px/1.2 Arial, sans-serif;
}

.credit:before {
    content:"— ";
}

blockquote, p {padding:0; margin:0;}