Archived topic

Speech bubble

1 reply · Started by Carole on August 20, 2020

Viewing posts 1–2 of 2

August 20, 2020 at 4:15 am #1410753

Hello
I would like to create speech bubble with text.
How can I do this?

Carole

August 20, 2020 at 5:34 am #1410887

Hi there,

it would require some CSS like this:

.bubble {
    position: relative;
    max-width: 250px;
    /* Set width */
    height: auto;
    padding: 20px;
    background: #FFFFFF;
    /* Set background-color */
    border-radius: 10px;
}

.bubble:after {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 15px 15px 0;
    border-color: #FFFFFF transparent;
    display: block;
    width: 0;
    z-index: 1;
    bottom: -14px;
    left: 50%;
    transform: translateX(-50%);
}

And then in your content you would add this HTML

<div class="bubble">
    This is my speech bubble text
</div>

This archived topic is closed to new replies.

Start building better websites today.