Arrow using borders
Arrow without images (for use with bubbles/tooltips), by using borders, transparent borders and absolute positioning.
HTML
<span class="arrow-bg"></span>
<span class="arrow"></span>
CSS
span {
display:block;
position:absolute;
left:0;
top:0;
border-top: 2px solid #000;
width:0;
height:0;
border-width:20px 20px 20px;
border-style:solid;
}
.arrow-bg {
border-color:black transparent transparent;
_border-color:black pink pink;
_filter: chroma(color=pink);
}
.arrow {
border-color:white transparent transparent;
_border-color:white pink pink;
top:-1px;
}
/* ie6 */
.arrow-bg,
.arrow {
_filter: chroma(color=pink);
}