http://habrahabr.ru/post/161041/
http://cssarrowplease.com

body {
    font-family: tahoma, arial, sans-serif;
    font-size: 12px;
}

h2 {
    font-size: 18px;
}

h2, p {
    margin-bottom: 10px;
    line-height: 150%;
}

h2.last, p.last {
    margin-bottom: 0;
}

.popup {
    position: absolute;
    max-width: 400px;
    border: 1px solid #71653a;
    border-radius: 5px;
    padding: 20px;
    color: #71653a;
    background-color: #fff1be;
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
}

.popup:before, .popup:after {
    content: "";
    position: absolute;
}

.popup.left:before {
    border-left: 10px solid #71653a;
    border-top: 10px solid rgba(113, 101, 58, 0);
    border-bottom: 10px solid rgba(113, 101, 58, 0);
    right: -10px;
    top: 20px;
}

.popup.left:after {
    border-left: 10px solid #fff1be;
    border-top: 10px solid rgba(255, 241, 190, 0);
    border-bottom: 10px solid rgba(255, 241, 190, 0);
    right: -9px;
    top: 20px;
}

.popup.right:before {
    border-right: 10px solid #71653a;
    border-top: 10px solid rgba(113, 101, 58, 0);
    border-bottom: 10px solid rgba(113, 101, 58, 0);
    left: -10px;
    top: 20px;
}

.popup.right:after {
    border-right: 10px solid #fff1be;
    border-top: 10px solid rgba(255, 241, 190, 0);
    border-bottom: 10px solid rgba(255, 241, 190, 0);
    left: -9px;
    top: 20px;
}

.popup.top:before {
    border-left: 10px solid rgba(113, 101, 58, 0);
    border-right: 10px solid rgba(113, 101, 58, 0);
    border-top: 10px solid #71653a;
    left: 20px;
    bottom: -10px;
}

.popup.top:after {
    border-left: 10px solid rgba(255, 241, 190, 0);
    border-right: 10px solid rgba(255, 241, 190, 0);
    border-top: 10px solid #fff1be;
    left: 20px;
    bottom: -9px;
}

.popup.bottom:before {
    border-left: 10px solid rgba(113, 101, 58, 0);
    border-right: 10px solid rgba(113, 101, 58, 0);
    border-bottom: 10px solid #71653a;
    left: 20px;
    top: -10px;
}

.popup.bottom:after {
    border-left: 10px solid rgba(255, 241, 190, 0);
    border-right: 10px solid rgba(255, 241, 190, 0);
    border-bottom: 10px solid #fff1be;
    left: 20px;
    top: -9px;
}

<div class="popup bottom" style="left: 20px; top: 20px;">
    <h2>Привет!</h2>
    <p class="last">Я &ndash; всплывающее окно со стрелочкой сверху.</p>
</div>

<div class="popup top" style="left: 20px; top: 140px;">
    <h2>Привет!</h2>
    <p class="last">Я &ndash; всплывающее окно со стрелочкой снизу.</p>
</div>

<div class="popup left" style="left: 20px; top: 260px;">
    <h2>Привет!</h2>
    <p class="last">Я &ndash; всплывающее окно, появляющееся слева от родительского элемента.</p>
</div>

<div class="popup right" style="left: 20px; top: 400px;">
    <h2>Привет!</h2>
    <p class="last">А я &ndash; всплывающее окно, появляющееся справа.</p>
</div>