Speech bubble

Written byPhuoc Nguyen

#Markup

You only need to provide one element to add the speed bubble effect.

<div class="speech-bubble">
    <!-- Content goes here -->
</div>

To create a speech bubble, we can display a triangle at the bottom-left corner of the container. Rather than adding an external element to the container, we can create the triangle using the `::before` pseudo-element. Here's an example to help you visualize it:

.speech-bubble {
    position: relative;
}
.speech-bubble::before {
    content: '';

    position: absolute;
    bottom: 0;
    left: -1rem;

    border-width: 1rem;
    border-style: solid;
    border-color:
        transparent transparent rgb(226 232 240) transparent;
}

First, we set the `position` property of the container to `relative`. This allowed us to position the triangle using absolute positioning.

But the real magic comes from the `::before` pseudo-element. We used the `content` property to add an empty string to this element. That may seem weird, but it's necessary because pseudo-elements require content to be displayed. To position the triangle where we wanted it, we used the `bottom` and `left` properties. By setting the `left` property to a negative value, we moved half of the triangle outside of the container.

Finally, we created the triangle shape by setting the `border-color` property to transparent for the top, left, and right borders. This made the perfect triangle we were looking for.

If you want to change the direction or position of the triangle, it's easy to do by following this post.

Let's take a moment to review the progress we've made with these steps.

#Using two pseudo-elements

In the previous section, we used the `::before` pseudo-element to create a triangle. Now, let's take it a step further and create two circles using the `::before` and `::after` pseudo-elements.

Take a look at the demo below to see how it looks:

To achieve this, we position both pseudo-elements absolutely at the bottom-left corner of the container, just like in the previous example.

.speech-bubble::before,
.speech-bubble::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
}

However, each of them is positioned differently by using the `transform` property. Let's take a closer look at the `transform` declaration for the `::before` pseudo-element. The first and second numbers move the element along the horizontal (X) and vertical (Y) axis, respectively.

.speech-bubble::before {
    transform: translate(-0.5rem, 0.5rem);
}

#See also

Questions? 🙋

Do you have any questions? Not just about this specific post, but about any topic in front-end development that you'd like to learn more about? If so, feel free to send me a message on Twitter or send me an email. You can find them at the bottom of this page.

I have a long list of upcoming posts, but your questions or ideas for the next one will be my top priority. Let's learn together! Sharing knowledge is the best way to grow 🥷.

Newsletter 🔔

If you're into front-end technologies and you want to see more of the content I'm creating, then you might want to consider subscribing to my newsletter.

By subscribing, you'll be the first to know about new articles, products, and exclusive promotions.

Don't worry, I won't spam you. And if you ever change your mind, you can unsubscribe at any time.

Phước Nguyễn