Talk Bubbles in CSS

Had to come up with some sort of chat / talk bubbles for messages back & forth.  This isn’t a new idea, I’ve seen this style around quite a bit but never paid much attention to it.   My most recent exposure was from Backyard Monsters, a game on facebook that uses it for its messaging layout.  I figured it could be done in pure CSS without too much trouble if it hasn’t already.  With a quick search I found two, but they were both slightly lacking…

First was a post from Nicolas Gallagher, which gave me a great start.  Showing how to overlay two side borders, a larger, dark backdrop then a slightly smaller light overlay for the triangle.  But these had huge borders, and when they were shrunk down they became pixelated and looked different in the different browsers FF / IE / Safari / Chrome.

The second was from a great resource, The Shapes of CSS.  This was a slimmed down version, but lacked any kind of separate border color.

After smashing both together and some fiddling around, I was able to come up with this solution which looks great in Firefox, Safari, and Internet Explorer.. Unfortunately Chrome completely freaked out when it came to the border style ‘dashed’ (for reasons completely unknown, check my jsfiddle in Chrome to check it out, includes a ‘workaround’).

Here’s a screen shot of the finished result, though I really hope it looks the same no matter what.   The css source is below and over here.

.talkbubble {
    margin: 1em 0 1.4em;
    padding: 15px;
    min-height:20px;
    background: #fff;
    position: relative;
    border: 1px solid #333333;
    -moz-border-radius:    5px;
    -webkit-border-radius: 5px;
    border-radius:         5px;
    box-shadow: 2px 2px 3px #888;
}
.talkbubble.left {
    margin-left: 76px;
}
.talkbubble.left:before {
    content:"";
    position:absolute;
    right: 100%;
    top: 10px;
    width: 0px;
    height: 0px;
    border-top: 14px inset transparent;
    border-right: 20px dashed #333333;
    border-bottom: 14px inset transparent;
}
.talkbubble.left:after {
    content:"";
    position:absolute;
    right: 100%;
    top: 11px;
    width: 0px;
    height: 0px;
    border-top: 13px inset transparent;
    border-right: 19px dashed #fff;
    border-bottom: 13px inset transparent;
}

.talkbubble.right {
    margin-right: 76px;
    text-align:right;
}
.talkbubble.right:before {
    content:"";
    position:absolute;
    left: 100%;
    top: 10px;
    width: 0px;
    height: 0px;
    border-top: 14px inset transparent;
    border-left: 20px dashed #333333;
    border-bottom: 14px inset transparent;
}
.talkbubble.right:after {
    content:"";
    position:absolute;
    left: 100%;
    top: 11px;
    width: 0px;
    height: 0px;
    border-top: 13px inset transparent;
    border-left: 19px dashed #fff;
    border-bottom: 13px inset transparent;
}

Leave a Comment


NOTE - You can use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

WordPress Appliance - Powered by TurnKey Linux