Cross Browser CSS Arrows / Triangles

========

*Tags: css, css Arrow, CSS Triangles, Cross Browser CSS Arrow, Cross Browser CSS Triangle*

**Copyrights:**

All Copyrights reserved to [Mohamed Alaa – Front End Developer](http://www.seniorwebdesigner.com/ “Mohamed Alaa – Front End Developer / Senior Web Designer”)


                                          /* Common Style */.arrow-top, .arrow-right, .arrow-bottom, .arrow-left {
    width: 0;
    height: 0;
    line-height: 0;
}
 /* â–´ */.arrow-top {
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid black;
}
 /* â–¸ */.arrow-right {
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 10px solid blue;
}
 /* â–¾ */.arrow-bottom {
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #f00;
}
 /* â—‚ */.arrow-left {
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid green;
}
 /* IE6 Fix */.ie6 .arrow-top, .ie6 .arrow-right, .ie6 .arrow-bottom, .ie6 .arrow-left {
    font-size: 0;
}
 /* IE6 Transparency Fix */.arrow-top, .arrow-bottom {
    _border-right-color: pink;
    _border-left-color: pink;
    _filter: chroma(color=pink);
}
 .arrow-right, .arrow-left {
    _border-top-color: pink;
    _border-bottom-color: pink;
    _filter: chroma(color=pink);
}

Favorite0