To ease you in gently, let’s examine the HTML. A single element is required, so I’m using a
First, we’ll style the outer box:
Nothing too complicated there. The only essential property is
position: relativewhich is necessary for the speech bubble pointer. We also require Mozilla and Webkit vendor prefixes for border-radius and box-shadow to ensure they work in all CSS3 browsers. IE8 and below will show squared corners and no shadow, but the box will still be visible.
Now we need to create the triangular bubble pointer. Rather than resorting to images, we can use CSS borders to create any type of triangle. As a brief explanation, examine an element with wide differently-colored borders:
If we reduce the width and height of our element to 0px and use different sized borders, we can see different triangles being formed:
For our speech bubble pointer, we can therefore use a solid top and left border with transparent right and bottom borders:
But what do we assign those border properties to? Fortunately, we can use the CSS
:afterpseudo-elements to generate two more content items. Therefore:
The triangle is positioned at the bottom of our bubble. Incidentally, don’t bother trying to apply a shadow to this element — it’ll be shown around the transparent borders rather than the visible triangle.
We must now remove a section of this triangle. We can position a smaller white triangle over the gray one to achieve that effect:
Our pure CSS3 image-less speech bubble is complete.
In essence, we can utilize the :before and :after pseudo-elements to create many different effects. For example, a thought bubble can be created with two content items rounded into circles.