Speech Bubbles with CSS Only

Ok so these aren’t really new, most of them use images to get them to work but if you’ve ever worked with private banding of your site then images are very difficult to work with.  I wanted a solution that uses CSS only and the sites and examples I found weren’t quite sufficient, so I figure I’ll blog how I produced my own.

The first trick I learned is to make a triangle shaped div.

div.speechBubbleTickLeft 
{
    position: absolute;
    width:0;
    height:0;
    border-left: 0px solid transparent;
    border-right: 15px solid transparent;
    border-top: 15px solid #00aff0;
    border-bottom: 0;
    margin-left: 20px;
    margin-top: 0px;
}

This will show a tick on the left side, like this

Then all we need to do is place is at the bottom of your text div.  If your divs are a single colour, then this is a peice of cake.  But if you have a solid single border around your div then this gets harder.  You will need to fill your triangle with another triangle that is a pixel smaller to get your border.

div.speechBubbleTickInnerLeft 
{
    position: absolute;
    width:0;
    height:0;
    border-left: 0px solid transparent;
    border-right: 13px solid transparent;
    border-bottom: 0;
    margin-left: 21px;
    margin-top: 4px;
}

Now just add your favourite styling to your div’s and you have yourself a nice speech bubble.

You can also make your speech bubble ticks go right, left or center just by adjusting the border-left and border-right properties.  It works in every browser I can test on, I.E. IE7, Opera, Safari, Firefox, Chrome.