Advanced Search

Cross Browser CSS Arrows / Triangles

/ Published in: CSS
Save to your folder(s)
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")

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. /* Common Style */
  2. .arrow-top,
  3. .arrow-right,
  4. .arrow-bottom,
  5. .arrow-left {width: 0; height: 0; line-height: 0}
  6.  
  7. /* â–´ */
  8. .arrow-top {border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid black}
  9.  
  10. /* â–¸ */
  11. .arrow-right {border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right:10px solid blue}
  12.  
  13. /* â–¾ */
  14. .arrow-bottom {border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid #f00}
  15.  
  16. /* â—‚ */
  17. .arrow-left {border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 10px solid green}
  18.  
  19. /* IE6 Fix */
  20. .ie6 .arrow-top,
  21. .ie6 .arrow-right,
  22. .ie6 .arrow-bottom,
  23. .ie6 .arrow-left {font-size: 0}
  24.  
  25. /* IE6 Transparency Fix */
  26. .arrow-top,
  27. .arrow-bottom {
  28.     _border-right-color: pink;
  29.     _border-left-color: pink;
  30.     _filter: chroma(color=pink)
  31. }
  32.  
  33. .arrow-right,
  34. .arrow-left {
  35.     _border-top-color: pink;
  36.     _border-bottom-color: pink;
  37.     _filter: chroma(color=pink)
  38. }

URL: http://www.seniorwebdesigner.com

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.