Как я могу создать «хвост всплывающей подсказки», используя чистый CSS?

Я только что наткнулся на хитрый трюк с CSS. Взгляните на скрипку ...

 .tooltiptail {display: block; цвет границы: #ffffff # a0c7ff #ffffff #ffffff; стиль границы: твердый; ширина границы: 20 пикселей; ширина: 0 пикселей; высота: 0 пикселей; } .anothertail {background-image: url (http: //static.jqueryfordesigners. com / demo / images / coda / bubble-tail2.png); дисплей: блок; высота: 29 пикселей; ширина: 30 пикселей; } 

 
 Классный трюк: 
 
 
 
 Как получить этот эффект с помощью только CSS? 
 
 
 

Это создает небольшой эффект стрелки / треугольника, «хвост всплывающей подсказки». Это взрывает мой разум! Мне действительно интересно узнать, как это работает?!

Кроме того, есть ли способ расширить этот трюк CSS для создания следующего эффекта:

Это интересная проблема. Можно ли это сделать, используя только CSS, пока игнорируя тень?

ОБНОВЛЕНИЕ 1

Я нашел решение своего первоначального вопроса. Вот скрипка ...

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

HTML

Cool Trick:

    

    

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

Теперь, как мне точно имитировать маленькую картинку выше, используя чистый CSS, включая тень и имея кроссбраузерную совместимость?

ОБНОВЛЕНИЕ 2

Вот мое решение после комбинации ответов ниже. Я не тестировал его в нескольких браузерах, но он отлично смотрится в Chrome.

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

HTML

    
i can haz css tooltip
    

    

    

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