Css speech bubbles

[toolman]

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:

Edit fiddle - JSFiddle - Code Playground

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

[Ray.H]

@toolman

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

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;}

[toolman]

@Ray.H

border-width: 0 20px 20px;

Thank you, that worked great!

[toolman]

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?

[Ray.H]

@toolman

Any ideas how I should center it?

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

left: calc(50% - 10px);

[toolman]

@Ray.H

left: calc(50% - 10px);

Awesome, thanks

[SamA74]

@Ray.H

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

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.

[Ray.H]

@SamA74

but it needed 20px subtracting to get the center

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

[Ray.H]

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;

[SamA74]

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