Pure CSS3 Speech Bubbles

CSS3 is all about using no-images and when creating speech bubbles it should lack in the use of images as well. Speech Bubbles are often used in comments, tooltips, testimonials and so forth. To create CSS3 Speech Bubbles it is important to know, how to create triangles with css.

To create following speech bubble we use a single HTML element (div or p), a few lines of CSS3 code, no images and no javascript code.

At first we create the bubble itself, with the content. we create a div in which we place the content and add following css to it.

	position: relative;
	background: #fff;
	padding: 20px 10px;
	border: 5px solid #E7B550;
	border-radius: 20px;
	box-shadow: 0 0 15px #999;

The most important part of this css is the position: relative so we can place the arrow at any position we want near the bubble using position: absolute. With the border property we distinguish the bubble from the rest of the content and do we create a nice look and feel.

When creating the triangles we use as technique the partially border of an element. In order to give the triangle a background similar to the one used in the bubble we add not one but two css3 triangles. At first we create the lower layer triangle using ‘:before’ we do this so we don’t need to use empty elements.

.speechbubble:before{
	content: '';
	position: absolute;
	width: 0;
	height: 0;
	left: 50px;
	top: 65px;
	border: 15px solid;
	border-color: #E7B550 transparent transparent #E7B550;
}

At last we add a smaller arrow with the same border color as the background of the bubble. This arrow is centered in the previously added arrow. Everything added using :before has a lower z-index than things added :after an element.

.speechbubble:after{
	content: '';
	position: absolute;
	width: 0;
	height: 0;
	left: 55px;
	top: 60px;
	border: 11px solid;
	border-color: #fff transparent transparent #fff;
}

As you can see the arrows are quite similar, except for size, position and color.

Advanced CSS3 Speech Bubbles

Below you see some different advanced speech bubbles created by playing around with the the CSS3 arrow technique and the :before and :after pseudo-elements.