creating a chevron in CSS

I’m looking at how to create a chevron (not a triangle) in CSS. Basically create icons that look like > or <.

On this site: http://css-tricks.com/examples/ShapesOfCSS/ at the bottom, there is a chevron. However, it is pointed down. I was wondering how I can make it point right, and point left. I tried playing around with the angles, but I couldn’t figure it out since I’m not really sure how these things are created anyway.

As an aside, is this something that should be created in some drawing library like d3, or just use a div? I’m basically using this chevron to try to separate visually elements on a screen.

Answer

Just do a rotate(90deg) on #chevron :

#chevron {
  position: relative;
  top: 100px;
  text-align: center;
  padding: 12px;
  margin-bottom: 6px;
  height: 60px;
  width: 200px;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}

http://jsfiddle.net/29Edw/

Leave a Reply

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