[CSS]Border effetto triangolo

[habbofilips]

buonasera a tutti. io ho questa classe popup e vorrei che il div che appare avesse in alto quell'effetto a forma di triangolino che se non sbaglio si disegna con i bordi. Ma non riesco a farlo uscire. Posto il mio css della classe popup e dei bordi per disegnare

.popup{position: relative; z-index: 8; text-decoration: none !important}
.popup:hover {background: transparent; z-index: 9}
.popup> div {display: none; position: absolute; top: 0px; left: 0px; padding: 5px;}
.popup> div img {padding: 2px}
.popup:hover > div {display: block; background-color: #FFF; color: #222;}
.popup:hover span span {display: inline; border: none}

<div style="font-size:20px; width:auto">TESTO DEL POPUP</div>

/*da mettere nella classe popup*/
        top: -6px;
        border-left: 6px solid transparent;
        border-top: 6px solid #fff;
        border-right: 6px solid transparent;