advanced code snippet search

Posted By

MohamedAlaa on 09/29/11


Tagged

css browser triangle arrow cross Triangles


Versions (?)

Cross Browser CSS Arrows / Triangles

 / Published in: CSS
 

URL: http://www.seniorwebdesigner.com

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

Expand | Embed | Plain Text 
  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. }

Report this snippet  

You need to login to post a comment.