Creating a speech bubble with dynamic height using CSS

Question

I need to get a speech bubble that looks something like this via CSS:

I do not need to set default height for a box. It must have dynamic height. And if the height is increased, the left arrow must be in the center.

I looked through some examples, but I don't know how to change the height! Here is the code I have:

<style>
    .bubble
    {
    position: relative;
    width: 250px;
    height: 120px;
    padding: 0px;
    background: gray;
    margin-left:50px;
    }

    .bubble:after
    {
    content: "";
    position: absolute;
    top: 45px;
    left: -15px;
    border-style: solid;
    border-width: 15px 15px 15px 0;
    border-color: transparent gray;
    display: block;
    width: 0;
    z-index: 1;
    }
</style>
<div class="bubble"></div>

Naveen Kumar Alone · Accepted Answer · 2013-08-02 07:36:32Z

1

Here is JSBin

Make

 top: 40%;
 bottom: 50%;

in your .bubble:after in CSS script

You have to check it by changing the .bubble height

edited Aug 2, 2013 at 7:36

answered Aug 2, 2013 at 7:30

Naveen Kumar Alone

7,6985 gold badges40 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Creating a speech bubble with dynamic height using CSS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related