How To Make A Simple Speech Bubble With CSS

Let’s break it down. A simple speech bubble contains a big rectangle or circle text area and an arrow  like this:

HTML First

So, as a start, your html should have a speech bubble area with an arrow somewhere in there, similar to this:

<div class="speech-bubble">
  <div class="arrow bottom right"></div>
  Thinking....
</div>

An Absolute Rectangle In CSS

Next, the CSS for the speech bubble rectangle area is pretty simple. Just make a rectangle with rounded corners (if that’s what you want) and add any colors you like. Make sure to add absolute positioning, which is necessary for adding the arrow later.

.speech-bubble {
    background-color: #f8f8f8;
    border: 1px solid #c8c8c8;
    border-radius: 5px;
    width: 110px;
    text-align: center;
    padding: 20px;
    position: absolute;
}

Adding The Arrow

Now, the fun part. To make an arrow in CSS, check out this great post in CSS Tricks. Basically, you’re just creating a very think border for a rectangle with one non-existent side. So your code will look something like this:

.speech-bubble .arrow {
    border-style: solid;
    position: absolute;
}

.bottom {
    border-color: #c8c8c8 transparent transparent transparent;
    border-width: 8px 8px 0px 8px;
    bottom: -8px;
}

The side with 0px determines which way your arrow points.

Add A Second Arrow

If you’ve added the code above, you might have noticed that the color of the arrow is the same as the border around the speech bubble, so it doesn’t blend in quite yet. Your speech bubble just looks something like this:

So, the final step is to add another arrow with the color of the inside of the speech bubble on top of the existing arrow. This could be done with cool CSS :after selector:

.bottom:after {
    border-color: #f8f8f8 transparent transparent transparent;
    border-style: solid;
    border-width: 7px 7px 0px 7px;
    bottom: 1px;
    content: "";
    position: absolute;
    left: -7px;
}

To play around with this code, check it out on jsfiddle. And if you’re making a more complicated speech bubble or tooltip, make sure to check out hint.css and jquery ui tooltip, which make the whole arrow placement problem much simpler.

Happy coding!

Enjoy the article? Join over 14,500+ Swift developers and enthusiasts who get my weekly updates.