CSS Speech Bubbles & Triangles

You may have seen various types of speech bubbles across the web, some use images and others use pure CSS to create this effect. In this article we will be looking at how you can create a triangle with CSS and how you can use a triangle to then create simple speech bubbles.

Triangles#

The basics of CSS triangles is illustrated brilliantly by both CSS-Tricks and Dave Walsh. Triangles basically consist of an element with zero width and height, a single large border and two transparent borders – as shown in the example below.

<div class="triangle"></div>

.triangle
{
	width: 0;
	height: 0;
	border-top: 25px solid transparent;
	border-bottom: 25px solid transparent;

	border-left: 25px solid MediumVioletRed;
}

Demo

There are many different shapes and sizes you can achieve using this method of rendering, as well as many uses – arrows being the obvious choice. But my favourite, and the one we’ll be covering in this article, is using CSS triangles to create speech bubbles.

Speech Bubbles#

A huge number of variations can be achieved simply by tweaking certain areas of the code, so here’s just one example:

HTML

<div class="bubble">Hello World!</div>

CSS

.bubble
{
	position: relative;
	width: 160px;
	padding: 20px;
	background-color: SteelBlue;
	border-radius: 2px;
	color: #FFF;
	text-align: center;
}
.bubble:after
{
	content: "";
	position: absolute;
	top: 100%;
	left: 75px;
	width: 0;
	height: 0;
	border-left: 30px solid transparent;
	border-right: 30px solid transparent;

	border-top: 30px solid SteelBlue;
}

Demo

So that’s all for now folks! If you’re interested in this subject there are some more interesting articles available, like Speech Bubble Arrows that Inherit Parent Color by CSS-Tricks and Pure CSS speech bubbles by Nicolas Gallagher. Also, if you like this article remember to share it.