Balloon CSS

Foreword

Much previously done using JS can be implemented using CSS, often it simplifies some tasks. The article will explain how to align the triangular arrow of the balloon in the middle of the vertical and how to avoid using the image to draw this triangle.

To begin with - listing of all code

HTML markup (hereinafter will be described about the implementation without a span with a space inside)

<p class="balloon"> <span class="arrow"> </span>My CSS balloon </p> 

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 with CSS?

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

A visual explanation of how this method works:

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

First let me remind you that the 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 balun is not static. This is done as follows:

top = balloonHeight/2 - arrowHeight/2

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

Align the triangle on 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 balun, you must subtract the half height of the triangle:

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

In the same way, horizontal alignment is realized.

Demo

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

Relation using the: before selector and the content property

At the request of dshster

HTML

 <p class="balloon"> Balloon </p> 

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

 <p class="balloon"> Balloon </p> 

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 the large triangle so that it is inscribed in the triangle. He is assigned a style with a shadow. It should be noted that the shadow at the edges has a color that is less saturated, so in the example the color of the shadow is # 555, not #bbb

Demo

jsfiddle.net/mdQzH/586