Css speech bubbles

Hi,

I’m trying to create some CSS speech bubble with a version with the arrow at the top and one with the arrow at the bottom.

I have the one with the arrow at the bottom working, but I can’t work out how to get the arrow on top.

I have this fiddle:
https://jsfiddle.net/toolman/j3rb8e5d/5/

Also, I have duplicated the HTML of the bottom one, but the second one has a 1px line appearing under the arrow.

Can anyone help me create the version with it at the top?

Many thanks

To get the arrow at the top just swap out your border-width values
from…
border-width: 20px 20px 0;

to…
border-width: 0 20px 20px;

 .bubble-top:before {
    content: "";
    position: absolute;
    top: -20px;
    left: 50%;
    border-width: 0 20px 20px;
    border-style: solid;
    border-color: #dc555a transparent;
    display: block;
    width: 0;}
1 Like

Thank you, that worked great!

1 Like

Hi again,

I’ve noticed that the arrow is not quite centered. I’ve used left: 50% which I thought would center it, but it’s not.

Any ideas how I should center it?

Try using calc() to account for half the 20px width

left: calc(50% - 10px);

1 Like

Awesome, thanks :slight_smile:

I came up with the same, but it needed 20px subtracting to get the center.

Another way without calc() was the make tha pseudo element display: inline-block then align the parent to the centre.
Though doing that to the bubble class will make the text in the bubble centred too. You would probably need an extra container if you don’t want the text in the centre.

1 Like

Yep, that would be right since it 's positioning from the left edge

And yet another way to do it without calc, while keeping it absolute positioned (with a width) is with auto margins.

left:0;
right:0;
margin:auto;
2 Likes

I think you nailed it with that one, no calc, no extra mark up.