CSS Speech Bubbles & Triangles

CSS Speech Bubbles & Triangles

   5 Comments    http://bit.ly/1czjjai

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.

Photo by StreetFly JZ.


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>
	width: 0;
	height: 0;
	border-top: 25px solid transparent;
	border-bottom: 25px solid transparent;

	border-left: 25px solid MediumVioletRed;


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:


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


	position: relative;
	width: 160px;
	padding: 20px;
	background-color: SteelBlue;
	border-radius: 2px;
	color: #FFF;
	text-align: center;
	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;


Hello World!

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.

5 responses to “CSS Speech Bubbles & Triangles

    1. Hi Jatin. Sure, you’d use a left and a right border to form the vertical triangle. Then is you remove any margins and set left to 0 is should appear in the top left corner.

Leave a Reply

Your email address will not be published. Required fields are marked *