Design

CSS speech bubbles

June 28, 2012 by Sreejesh KV in Design with 13 Comments

In this tutorial we will be creating a nice speech bubble using CSS alone. No images anywhere, and with only a single HTML element. Some of you may be familiar with the trick of generating triangle shapes using css borders. We are going to use that technique here.

Output

HTML

Here is the html for the speech bubble.

<div class='bubble'>
	<p>
	Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse sodales arcu eget lorem pretium ullamcorper.
Suspendisse adipiscing nulla vel ipsum rutrum semper.
	</p>
</div>

CSS

And here comes the CSS. Only a few lines. Nice and neat, ain’t it ?

div.bubble{
	font-size:13px;
	line-height:19px;
	color:#fff;
	padding:15px;
	width:200px;
	background:#aaa;
	position:relative;
	border-radius:15px;
	margin:30px 0;
}

div.bubble:after{
	content:'';
	width:0;
	position:absolute;
	bottom:-30px;
	border-color:#aaa transparent;
	left:40px;
	border-style:solid solid none;
	border-width:30px 10px;

}

Explanation

Here we use the :after pseudo element to generate the tail of the speech bubble. It is positioned absolute with respect to the bubble div. If you are not aware of the :after and :before pseudo elements in CSS, you may visit the w3 documentation .
The after element is made to look like a triangle with its one vertex pointing downward. For this , we apply a css border to the element which is 30px wide for top and bottom and 10px wide for left and right borders.
Then we change the left and right border colors to transparency and thus we get the tail of the speech bubble .
Now, all that we need to do is position the tail absolutely with respect to the speech bubble.

Demo

You can view the demo here.

Modifications

This is a pretty basic implementation of the idea. I have put it as simplified as possible for the sake of understanding. If you are interested , you may try playing around with the CSS to get a lot of nice looking speech bubbles. You may try editing the border-width attribute to change the angle of the triangle vertex. Also you can make use of both the before and and after pseudo elements to make a speech bubble with a border.

Tagged css tutorials, speech bubble

Sharing

Create a notebook like layout using CSS3 alone

13 Comments

n42kJuly 7, 2012 at 7:28 amReply

Thank you! You actually did another CSS3 tutorial!

I had no idea you could generate such triangle borders with CSS. There are probably many, many more things you can do with it. Please keep doing these, I love them and they seem very informative, simple and improve my knowledge of CSS tricks greatly, especially when I apply them in my projects.
WaynefireJuly 7, 2012 at 11:09 amReply

Thank you for this! I have always seen these speech bubbles and was curious how the site owner manged to get these listed on the site. I figured it was some type of coding, but I did not realize it was part of the CSS. Does this have to be internal or external CSS though?
izzypopaJuly 13, 2012 at 5:12 amReply

Thanks so much for this tutorial, I have been wondering how to incorporate some CSS into my Forum and Blog but haven’t had the knowledge too until now.
Very good tutorial
DesireeJuly 17, 2012 at 2:56 amReply

CSS3 is great and I can hardly wait to see it supported by all browsers (especially the dreadful IE).

It’s awesome how you can save a lot of bandwidth and disk space using CSS3 instead of images and have your website load in a flash.

As for your tutorial, thank you for it, it’s really useful. How about If I wanted to have the bottom arrow of the bubble to the left? Is this possible?
LauraJuly 17, 2012 at 6:43 pmReply

I have just tried and it work. You make everything so easy. You are my new guru.
ollierexxJuly 19, 2012 at 12:53 amReply

Thanks for another nice and easy CSS tutorial. Just added some of these in the form of testimonials for my sales page for my product. Please keep making these tutorials, they are so helpful
FlipKupJuly 22, 2012 at 11:45 amReply

Big thanks for this tut! CSS Bubbles are an easy and creative way of sprucing up your web page and making it look nice and sleek. I can see this type of speech bubble on numerous websites that implement CSS nowadays, and the nice, minimalist look is also employed by some designers over at Apple!
KennyKAugust 4, 2012 at 10:00 pmReply

Thanks for sharing this. I’m not so good with CSS , I would say I have basic knowledge, but have been learning it more and more because it’s required for keeping my website design work fresh. We have to learn new things because that’s what clients want and it opens new possibilities for design.
BloomaticAugust 7, 2012 at 4:30 amReply

This is a very nice design. I used to use long ago in some publications, but the way was more complicated. This method is simpler and is very well. I’m pretty new to using CSS, but I like these ideas. They are simple to implement. Thanks for sharing.
coolboylkAugust 8, 2012 at 8:50 pmReply

Even a child can understand. You have explained it well. It worked. Please make more useful tutorials like this. Thank you.
ohiotom76August 14, 2012 at 3:56 amReply

Interesting technique with the triangle. So if I understand this correctly, by declaring a thick border for the top and sides, and no border for the bottom – setting the sides to transparent produces the triangle?
cheaNovember 15, 2012 at 11:56 amReply

Thanks was looking for away to add a speech bubble to the footer of my site. Great tutorial. Just had to copy and past the code. Thank you.
Wen SantigoMay 1, 2013 at 9:01 amReply

CSS is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation, including elements such as the layout, colors, and fonts.This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple pages to share formatting, and reduce complexity and repetition in the structural content (such as by allowing for tableless web design). ..`

Please do look over this useful homepage
<http://www.foodsupplementcenter.com