Speech bubble

Written byPhuoc Nguyen

Created

31 Aug, 2023

#Markup

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

html

<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:

css

.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.

css

.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.

css

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

#See also

If you found this post helpful, please consider giving the repository a star on GitHub or sharing the post on your favorite social networks 😍. Your support would mean a lot to me!

Questions? 🙋

Do you have any questions about front-end development? If so, feel free to create a new issue on GitHub using the button below. I'm happy to help with any topic you'd like to learn more about, even beyond what's covered in this post.

While I have a long list of upcoming topics, I'm always eager to prioritize your questions and ideas for future content. Let's learn and grow together! Sharing knowledge is the best way to elevate ourselves 🥷.

Ask me questions

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