Advanced Search

Return to Snippet

Revision: 51598
at September 29, 2011 02:32 by MohamedAlaa
Initial Code 
/* 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)
}
Initial URL 
http://www.seniorwebdesigner.com
Initial Description 
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")
Initial Title 
Cross Browser CSS Arrows / Triangles
Initial Tags 
css, browser
Initial Language 
CSS