Posted By

MohamedAlaa on 09/29/11

Tagged

css
browser

Versions (?)

Last Edited at 09/29/11 02:32am

Statistics

Viewed 841 times

Favorited by 0 user(s)

Related snippets

Cross Browser CSS Arrows / Triangles

/ Published in: CSS

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")

Highlighted TextExpand

/* 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)
}

URL: http://www.seniorwebdesigner.com

Report this snippet Tweet

Comments

Subscribe to comments

Comment:

You need to login to post a comment.