Pure CSS speech bubbles

by Avinashullal

HTML

<p class="triangle-right">I was overwhelmed by the number of resumes being submitted. VoiceGlance allowed me to pre-screen candidates easily and to my specs without losing the personal touch…</p>
<a href="http://nicolasgallagher.com/pure-css-speech-bubbles/demo/">Link</a>

CSS

.triangle-right {
    position:relative;
    padding:15px;
    margin:1em 0 3em;
    color:#fff;
    background:#075698;
    /* default background for browsers without gradient support */
    /* css3 */
    background:-webkit-gradient(linear, 0 0, 0 100%, from(#2e88c4), to(#075698));
    background:-moz-linear-gradient(#2e88c4, #075698);
    background:-o-linear-gradient(#2e88c4, #075698);
    background:linear-gradient(#2e88c4, #075698);
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    border-radius:10px;
}
.triangle-right:after {
    content:"";
    position:absolute;
    bottom:-20px;
    /* value = - border-top-width - border-bottom-width */
    left:50px;
    /* controls horizontal position */
    border-width:20px 0 0 20px;
    /* vary these values to change the angle of the vertex */
    border-style:solid;
    border-color:#075698 transparent;
    /* reduce the damage in FF3.0 */
    display:block;
    width:0;
}