3 Steps Simple Responsive CSS Speech Bubbles

By / Basic Responsive CSS, Tips & Tutorials - HTML & CSS / August 15, 2020

INTRODUCTION
LET’S TALK

Welcome to a step-by-step tutorial on how to create simple responsive CSS speech bubbles. Once upon a time in the stone age of the Internet, CSS is not as convenient, and we have to create bubble quotes by cutting up several pieces of background images. Today, we can do up those speech bubbles (pretty) easily using only pure CSS – Read on to find out how.

ⓘ I have included a zip file with all the source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

NAVIGATION
TABLE OF CONTENTS

Preamble
Download		 Step 1
The Box		 Step 2
Adding The Tail
Step 3
Bubble Direction		 Alternative
Half Triangle + Circle		 Extra
Useful Bits
Extra
Video Tutorial		 Closing
What’s Next

 

 

PREAMBLE
SOURCE CODE DOWNLOAD

First, here is the download link to the example source code as promised.

 

SOURCE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

QUICK NOTES

There is nothing to install, so just download and unzip into a folder. If you spot a bug, please feel free to comment below. I try to answer questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

STEP 1
THE BOX

Let us start simple, with the raw basics first – By dealing with the HTML, then slowly build up the CSS.

 

THE HTML

bubble.html
<!DOCTYPE html>
<html>
  <head>
    <title>CSS Speech Bubble</title>
    <link rel="stylesheet" type="text/css" href="bubble.css">
  </head>
  <body>
    <div class="speech">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
      Sed egestas, ex in mattis sagittis, risus odio tincidunt libero, quis mattis ipsum enim vitae metus.
    </div>
  </body>
</html>

Aye, and all you need to create a speech bubble these days is just a normal <div> – We will be doing some CSS magic with it later.

 

A BOX FOR A START

Let us now turn that <div> into a “speech text box”.

bubble.css
.speech {
  position: relative;
  font-family: arial;
  font-size: 1.1em;
  background: #a53d38;
  color: #fff;
  border-radius: 10px;
  padding: 20px;
  max-width: 400px;
}

Well, this part shouldn’t be any trouble. Just some “usual box settings” of background color, padding, font size, font color, and more. Take extra note that the relative position is necessary for positioning the “tail” of the speech bubble later.

 

 

STEP 2
ADDING THE “TAIL”

We now have a speech box, but it is missing out on that “triangle tail” part. Adding this tail used to involve an image, but all we need now is but a few lines of CSS code.

 

THE MAGIC TRIANGLE

To create a “magic triangle” with CSS, all we need is to play with the border of the ::after pseudo-class.

bubble.css
.speech::after {
  content: '';
  border: 20px solid transparent;
  border-top-color: #000;
  border-bottom: 0;
}

 

EXTRA – MAGIC OF THE MAGIC TRIANGLE

For you guys who are wondering – How did that triangle appear from thin air!?

<style>
.magic {
  border-top: 20px solid #000;
  border-right: 20px solid #f00;
  border-bottom: 20px solid #0f0;
  border-left: 20px solid #00f;
  max-width: 100px;
}
</style>
<div class="magic"></div>

As you can see, the border around elements are “cut” at 45 degrees. So the true form of the “not-so-magic” triangle is essentially just a solid border-top with transparent border-left and border-right.

<style>
.magic {
  border-top: 20px solid #000;
  border-right: 20px solid transparent;
  border-left: 20px solid transparent;
  max-width: 1px;
}
</style>
<div class="magic"></div>

Yep. Not much of a mystery now. But a neat trick nonetheless.

 

POSITIONING THE MAGIC TRIANGLE

Just what is that triangle used for? To be used as the “tail” of the speech bubble. All we have to do is to reposition it properly… Of course, we also need to set it to the same color as the box itself.

bubble.css
.speech::after {
  /* [THESE WILL CREATE THE TRIANGLE] */
  content: '';
  border: 20px solid transparent;
  border-top-color: #a53d38;
  border-bottom: 0;

  /* [THESE WILL POSITION THE TRIANGLE] */
  position: absolute;
  bottom: -20px;
  left: 50%;
  margin-left: -20px;
}

This may look pretty confusing at first, but all we are playing with is the positioning:

  • Remember that we had a position: relative on the main box earlier? So now, when we put position: aboslute, bottom: 0,  and left: 50% on the triangle, it will be positioned directly below the box.
  • Problem is, that positioning alone will not be centered properly, as the borders will occupy a few pixels. So in order to truly center that triangle, we have to offset it using a bottom: -20px, and a negative margin-left to cater for the “thickness” of the border.
  • Feel free to play around with the left percentage to shift the position of the tail.

 

 

STEP 3
POSITING THE “TAIL”

We now have a complete speech bubble that is responsive… and this is actually kind of an optional step. If you want to have the “tail” of the bubble face a different direction, we can easily play around with the CSS.

 

DIRECTIONAL SHIFT

bubble.html
<div class="speech bottom">Bottom Tail</div>
<div class="speech top">Top Tail</div>
<div class="speech left">Left Tail</div>
<div class="speech right">Right Tail</div>
bubble.css
.speech {
  position: relative;
  font-family: arial;
  font-size: 1.1em;
  background: #a53d38;
  color: #fff;
  border-radius: 10px;
  padding: 20px;
  max-width: 400px;
}

.bottom::after {
  /* [THESE WILL CREATE THE TRIANGLE] */
  content: '';
  border: 20px solid transparent;
  border-top-color: #a53d38;
  border-bottom: 0;
  /* [THESE WILL POSITION THE TRIANGLE] */
  position: absolute;
  bottom: -20px;
  left: 50%;
  margin-left: -20px;
}

.top::after {
  content: '';
  border: 20px solid transparent;
  border-bottom-color: #a53d38;
  border-top: 0;
  position: absolute;
  top: -20px;
  left: 50%;
  margin-left: -20px;
}

.left::after {
  content: '';
  border: 20px solid transparent;
  border-right-color: #a53d38;
  border-left: 0;
  position: absolute;
  left: -20px;
  top: 50%;
  margin-top: -20px;
}

.right::after {
  content: '';
  border: 20px solid transparent;
  border-left-color: #a53d38;
  border-right: 0;
  position: absolute;
  right: -20px;
  top: 50%;
  margin-top: -20px;
}

Yep, this probably isn’t too difficult to understand now – All we did is just to reposition the triangle differently.

 

 

ALTERNATIVE
HALF TRIANGLE & CIRCLE BUBBLE

Looking for more ways to style the speech bubble this alternative section will show you a few more ways to play with the CSS.

 

THE HALF TRIANGLE

This is a small variant of the above speech bubbles… Which we just play around with the borders to create a half triangle instead.

bubble.html
<div class="speech half">Half Bottom Tail</div>
bubble.css
.half::after {
  content: '';
  border: 20px solid transparent;
  border-right: 20px solid #a53d38;
  border-top: 20px solid #a53d38;
  position: absolute;
  bottom: -20px;
  left: 80%;
}

 

CIRCULAR BUBBLE

bubble.html
<div class="circular">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
  Sed egestas, ex in mattis sagittis, risus odio tincidunt libero, quis mattis ipsum enim vitae metus.
  <div class="circular1"></div>
  <div class="circular2"></div>
</div>
bubble.css
.circular {
  position: relative;
  font-family: arial;
  font-size: 1.1em;
  background: #a53d38;
  color: #fff;
  border-radius: 50%;
  padding: 50px 70px;
  max-width: 300px;
}
.circular1 {
  background: #a53d38;
  width: 20px;
  padding: 20px;
  border-radius: 50%;
  position: absolute;
  right: 10px;
  bottom: -10px;
}
.circular2 {
  background: #a53d38;
  width: 10px;
  padding: 10px;
  border-radius: 50%;
  position: absolute;
  right: 0;
  bottom: -35px;
}

Circular bubbles are a tad bit more tricky but use the same positioning trick.

  • The main .circular container is the “main” message bubble, while .circular1 and .circular2 are the two smaller “tails”.
  • The styles for .circular is pretty much the same as a rectangular box, except that we give it a border-radius: 50% to turn it into a circle.
  • Next, we use the padding to shape the box into an ellipse.
  • We use the same  border-radius: 50% trick on .circular1 and .circular2 to turn them into circles, then position them using position: absolute.

That’s it! The circular bubble should be responsive as well, but do your own testing to see if it will break on the smaller screens.

 

 

EXTRA
USEFUL BITS

We are now done with the CSS speech bubble, here is a small extra that you may find useful.

 

SPACING AROUND THE BUBBLE

If the speech bubbles are stacked on top of each other in the above examples, they will all be “crammed together”. So as a small final tip and reminder, please do allow some spacing around them, for example:

.bottom {
  /* 5px margin all around the box, and 30px for the bottom */
  margin: 5px 5px 30px 5px;
}

 

EXTRA
VIDEO TUTORIAL

For you guys who want more, here’s the video tutorial, and shameless self-promotion – Subscribe to the Code Boxx YouTube channel for more!

 

YOUTUBE TUTORIAL

 

INFOGRAPHIC CHEAT SHEET

Pure CSS Speech Bubble (Click to enlarge)

 

CLOSING
WHAT’S NEXT?

Thank you for reading, and we have come to the end of this short tutorial. I hope that it has helped you to build a better project, and if you have anything to add to this project, please feel free to comment below. Good luck and happy coding!

Leave a Comment

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