triangle

HTML

<div id="comment_bubble"></div>

<div id="comment_bubble2"></div>



<br>
<div id="comment_bubble3"></div>

CSS

#comment_bubble {
    width: 140px;
    height: 100px;
    background: #088cb7;
    position: relative;
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
    border-radius: 5px;
}

#comment_bubble:after {
    content: "";
    width: 0;
    height: 0;
    left: 100%;
    top: 3%;
    position: absolute;
    border-top: 47px solid transparent;
    border-left: 20px solid #088cb7;
    border-bottom: 47px solid transparent;
}






#comment_bubble2 {
    width: 160px;
    height: 100px;
    background: #088cb7;
    position: relative;
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
    border-radius: 5px;
}
#comment_bubble2:after {
    content: "";
    width: 0;
    height: 0;
    left: 0%;
    top: 3%;
    position: absolute;
    border-top: 47px solid transparent;
    border-left: 20px solid #ffff;
    border-bottom: 47px solid transparent;
}










#comment_bubble3 {
    width: 140px;
    height: 100px;
    background: #088cb7;
    position: relative;
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
    border-radius: 5px;
}
#comment_bubble3:after {
    content: "";
    width: 0;
    height: 0;
    left: 0%;
    top: 3%;
    position: absolute;
    border-top: 47px solid transparent;
    border-left: 20px solid #ffff;
    border-bottom: 47px solid transparent;
}
#comment_bubble3:before {
    content: "";
    width: 0;
    height: 0;
    left: 100%;
    top: 3%;
    position: absolute;
    border-top: 47px solid transparent;
    border-left: 20px solid #088cb7;
    border-bottom: 47px solid transparent;
}