Balloon CSS

Foreword

Much that has been done using JS before can be implemented using CSS, often this simplifies some tasks. The article will talk about how to align the triangular arrow of the balloon in the middle vertically and how to avoid using the image to draw this very triangle.

For starters, listing all the code

HTML markup (hereinafter we will describe the implementation without span with a space inside)

 My CSS balloon

CSS

.balloon{
    position:absolute; left:40px; top:20px;
    width:200px; height:auto; /* высота подстраивается под контент */
    background:#fff; padding:10px;
    -webkit-border-radius:6px; -moz-border-radius:6px; border-radius:6px;
}
    .balloon>.arrow{
        position:absolute; left:-10px; top:50%; 
        margin-top:-10px;
        display:block;
        width: 0px;
        height: 0px;
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        border-right: 10px solid #fff;
    }

And now, in order

How to draw a triangle using CSS?

.balloon>.arrow{
        width: 0px;
        height: 0px;
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        border-right: 10px solid #fff;
}

Visual explanation of how this method works:

How to align the triangle in the center of the vertical?

First, let me remind you that an element A with absolute positioning, wrapped in element B with relative (or absolute) positioning, will have zero coordinates in the upper left corner of element B (i.e. it will be positioned inside element B)

.balloon{ position:absolute; }
    .balloon>.arrow{ position:absolute; }

Now you need to align the triangle in the center of the vertical, taking into account the fact that the height of the balloon is not static. This is done as follows:

top = balloonHeight/2 - arrowHeight/2

But, we can not get the height of the balloon using CSS. There is a beautiful way around this.

Align the triangle in Y at 50 percent of the height of the balloon (replacing balloonHeight / 2)

.balloon>.arrow{
        position:absolute; top:50%; 
}

From half the height of the balloon, you need to subtract half the height of the triangle:

.balloon>.arrow{
        position:absolute; top:50%; 
        margin-top:-10px;
}

Similarly, alignment is performed in the center of the horizontal.

Demo

With static height: jsfiddle.net/mdQzH/362
With dynamic height: jsfiddle.net/mdQzH/465

Release using the: before selector and content property

At the request of dshster

HTML

        Balloon

CSS

.balloon{
        display:block;
        position:absolute; left:40px; top:20px;
        width:200px; height:auto; /* высота подстраивается под контент */
        background:#fff; padding:10px;
        -webkit-border-radius:6px; -moz-border-radius:6px; border-radius:6px;
}
.balloon:before{
        content: '.';
        position:absolute; left:-10px; top:50%; margin-top:-10px;
        display:block;
        width: 0px;
        height: 0px;
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        border-right: 10px solid #fff;
}

Demo

jsfiddle.net/mdQzH/474

Balloon with shadow

At the request of niko83

HTML

        Balloon

CSS

.balloon{
        display:block;
        position:absolute; left:40px; top:10px;
        width:200px; height:auto;
        background:#fff; padding:10px;
        -webkit-border-radius:6px; -moz-border-radius:6px; border-radius:6px;
        moz-box-shadow:0 0 7px #bbb; -webkit-box-shadow:0 0 7px #bbb; box-shadow:0 0 7px #bbb;
}
        .balloon:before{
                content:" ";
                position:absolute; left:-10px; top:50%; margin-top:-10px; z-index:1;
                display:block;
                width: 0px;  height: 0px;
                border-top: 10px solid transparent;
                border-bottom: 10px solid transparent;
                border-right: 11px solid #fff; /* увеличено на единицу для сокрытия тени от подложки */
        }
        .balloon:after{
                content:" ";
                position:absolute; left:0px; top:50%; margin-top:-2px-; z-index:0;
                display:block;
                width: 4px; height: 4px;
                moz-box-shadow:-8px 0 7px #555; -webkit-box-shadow:-8px 0 7px #555; box-shadow:-8px 0 7px #555;
        }

A smaller block is placed under a large triangle, so that it fits into the triangle. He is assigned a style with a shadow. Keep in mind that the shadow on the edges has a less saturated color, so in the example the shadow color is # 555, not #bbb

Demo

jsfiddle.net/mdQzH/586