How can I create a "tooltip tail" using pure CSS?

Question

I just came across a neat CSS trick. Check out the fiddle...

.tooltiptail {    display: block;    border-color: #ffffff #a0c7ff #ffffff #ffffff;    border-style: solid;    border-width: 20px;    width: 0px;    height: 0px;  }  .anothertail {    background-image: url(http://static.jqueryfordesigners.com/demo/images/coda/bubble-tail2.png);    display: block;    height: 29px;    width: 30px;  }

<div>Cool Trick:    <br />    <div class="tooltiptail"></div>  </div>  <br />    <div>How do I get this effect with only CSS?    <br />    <div class="anothertail"></div>  </div>

This creates a little arrow/triangle-like effect, a "tooltip tail". This blows my mind! I'm really interested in knowing how this works?!

Further, is there a way to extend this CSS trick to create an effect as follows:

This is an interesting problem. Can this be done using only CSS, ignoring the shadow for now?

---

UPDATE 1

I figured out a solution to my initial question. Here's the fiddle...

http://jsfiddle.net/duZAx/7/

HTML

<div style="position: relative;">Cool Trick:<br />     <div class="tooltiptail"></div>     <div class="tooltiptail2"></div> </div> 

CSS

.tooltiptail {     display: block;     border-color: #ffffff #a0c7ff #ffffff #ffffff;     border-style: solid;     border-width: 20px;     width: 0px;     height: 0px; } .tooltiptail2 {     display: block;     border-color: transparent #ffffff transparent transparent;     border-style: solid;     border-width: 18px;     width: 0px;     height: 0px;     position: relative;     left: 4px;     top: -38px; } 

Now, how do I exactly mimic the little picture above using pure CSS, including the shadow and having it cross-browser compatible?

---

UPDATE 2

Here's my solution after a combination of the answers below. I haven't tested it across multiple browsers, but it looks great in Chrome.

http://jsfiddle.net/UnsungHero97/MZXCj/688/

HTML

<div id="toolTip">     <p>i can haz css tooltip</p>     <div id="tailShadow"></div>     <div id="tail1"></div>     <div id="tail2"></div> </div> 

CSS

#toolTip {     background-color: #ffffff;     border: 1px solid #73a7f0;     width: 200px;     height: 100px;     margin-left: 32px;     position:relative;     border-radius: 4px;     -moz-border-radius: 4px;     -webkit-border-radius: 4px;     box-shadow: 0px 0px 8px -1px black;     -moz-box-shadow: 0px 0px 8px -1px black;     -webkit-box-shadow: 0px 0px 8px -1px black; }  #toolTip p {     padding:10px; }  #tailShadow {     background-color: transparent;     width: 4px;     height: 4px;     position: absolute;     top: 16px;     left: -8px;     z-index: -10;     box-shadow: 0px 0px 8px 1px black;     -moz-box-shadow: 0px 0px 8px 1px black;     -webkit-box-shadow: 0px 0px 8px 1px black; }  #tail1 {     width: 0px;     height: 0px;     border: 10px solid;     border-color: transparent #73a7f0 transparent transparent;     position:absolute;     top: 8px;     left: -20px; }  #tail2 {     width: 0px;     height: 0px;     border: 10px solid;     border-color: transparent #ffffff transparent transparent;     position:absolute;     left: -18px;     top: 8px; } 

---

Answer 1

Here's an example with a box-shadow, all latest version browsers should support this

http://jsfiddle.net/MZXCj/1/

HTML:

<div id="toolTip">     <p>i can haz css tooltip</p>     <div id="tailShadow"></div>     <div id="tail1"></div>     <div id="tail2"></div> </div> 

CSS:

body {font-family:Helvetica,Arial,sans-serif;}  #toolTip {     position:relative; }  #toolTip p {     padding:10px;     background-color:#f9f9f9;     border:solid 1px #a0c7ff;     -moz-border-radius:5px;-ie-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;border-radius:5px; }  #tailShadow {     position:absolute;     bottom:-8px;     left:28px;     width:0;height:0;     border:solid 2px #fff;     box-shadow:0 0 10px 1px #555; }  #tail1 {     position:absolute;     bottom:-20px;     left:20px;     width:0;height:0;     border-color:#a0c7ff transparent transparent transparent;     border-width:10px;     border-style:solid; }  #tail2 {     position:absolute;     bottom:-18px;     left:20px;     width:0;height:0;     border-color:#f9f9f9 transparent transparent transparent;     border-width:10px;     border-style:solid; } 

body {    font-family: Helvetica, Arial, sans-serif;  }  #toolTip {    position: relative;  }  #toolTip p {    padding: 10px;    background-color: #f9f9f9;    border: solid 1px #a0c7ff;    -moz-border-radius: 5px;    -ie-border-radius: 5px;    -webkit-border-radius: 5px;    -o-border-radius: 5px;    border-radius: 5px;  }  #tailShadow {    position: absolute;    bottom: -8px;    left: 28px;    width: 0;    height: 0;    border: solid 2px #fff;    box-shadow: 0 0 10px 1px #555;  }  #tail1 {    position: absolute;    bottom: -20px;    left: 20px;    width: 0;    height: 0;    border-color: #a0c7ff transparent transparent transparent;    border-width: 10px;    border-style: solid;  }  #tail2 {    position: absolute;    bottom: -18px;    left: 20px;    width: 0;    height: 0;    border-color: #f9f9f9 transparent transparent transparent;    border-width: 10px;    border-style: solid;  }

<div id="toolTip">    <p>i can haz css tooltip</p>    <div id="tailShadow"></div>    <div id="tail1"></div>    <div id="tail2"></div>  </div>

Answer 2

Here's an explanation to answer your first question (I'll leave the actual CSS to others as I'm lazy — please upvote their answers which you think deserve the votes!):

This creates a little arrow/triangle-like effect, a "tooltip tail". This blows my mind! I'm really interested in knowing how this works?!

1. When rendering a border with varying edge colors but the same style (in your case, solid), the seam dividing each pair of adjacent corners is a diagonal line. It's quite similar to what the diagram here depicts of the groove, ridge, inset and outset border styles.

   Note that while all browsers behave the same way and have done so for as long as I can remember, this behavior is not fully defined in either the CSS2.1 spec or the CSS Backgrounds and Borders module. The latter has a section describing color and style transitions at corners, and the description seems to imply that for borders with zero corner radii, the line that is rendered is in fact a line that joins the corner of the padding edge with the corner of the border edge (resulting in a 45-degree angled line for equal-width borders), but the spec still cautions that this may not always be the case (especially since it does not even account for borders with zero corner radii explicitly).¹

2. By the content (original W3C) box model, a 40x40 area is created out of the 20-pixel borders, with the content dimensions being defined as 0x0.

3. Dividing a square with diagonal lines joining its four corners results in four right triangles whose right angles meet at the square's midpoint (see below).

4. The top, bottom and left borders are white to match the background of the .tooltiptail element's container, while the right border is a shade of blue to match the background color of the tooltip:

   border-color: #ffffff #a0c7ff #ffffff #ffffff; 

The result is this, with the borders labeled, and the border boundaries added using my trusty Line Tool:

Reorienting the tooltip tail is simply a matter of switching the tooltip color around. For example, this would yield a tail that's attached to the bottom of a tip:

border-color: #a0c7ff #ffffff #ffffff #ffffff; 

jsFiddle preview

---

¹_{If you're a stickler for standards compliance, you may as well consider all this a hack.}