Snippets

CSS Triangles

Triangles in pure CSS!

/* create an arrow that points up */
div.arrow-up {
  width:0px; 
  height:0px; 
  border-left:5px solid transparent;  /* left arrow slant */
  border-right:5px solid transparent; /* right arrow slant */
  border-bottom:5px solid #2f2f2f; /* bottom, add background color here */
  font-size:0px;
  line-height:0px;
}

/* create an arrow that points down */
div.arrow-down {
  width:0px; 
  height:0px; 
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  border-top:5px solid #2f2f2f;
  font-size:0px;
  line-height:0px;
}

/* create an arrow that points left */
div.arrow-left {
  width:0px; 
  height:0px; 
  border-bottom:5px solid transparent;  /* left arrow slant */
  border-top:5px solid transparent; /* right arrow slant */
  border-right:5px solid #2f2f2f; /* bottom, add background color here */
  font-size:0px;
  line-height:0px;
}

/* create an arrow that points right */
div.arrow-right {
  width:0px; 
  height:0px; 
  border-bottom:5px solid transparent;  /* left arrow slant */
  border-top:5px solid transparent; /* right arrow slant */
  border-left:5px solid #2f2f2f; /* bottom, add background color here */
  font-size:0px;
  line-height:0px;
}

Source: http://davidwalsh.name/css-triangles...

Share this snippet

 

Comments (2) - Leave yours

  1. Monica said:

    wow, that’s pretty simple… I was using a little arrow image and a div with rounded corners to generate a cute thought bubble in the comments on one of my sites, I’ll be swapping that image out with some nifty css generated triangles, now! thanks!! =D

Leave a Reply

Your email address will not be published. Required fields are marked *

Please respect the following rules: No advertising, no spam, no keyword in name field. Thank you!