Crystal Crystal - 2 years ago 938
HTML Question

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.

Thanks!

Answer Source

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/

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download