creating a chevron in CSS

Manage, create and control chevrons using CSS borders

Follow the notes in the example to change the results.

Parameters that can get altered:

1. Rotation.
2. Thickness.
3. Color.
4. Scale.

.chevron {
    position:relative;
    display:block;
    height:50px; /*Height should be double border thickness*/
}
.chevron::before,
.chevron::after {
    position:absolute;
    display:block;
    content:"";
    border:25px solid transparent; /*Adjust chevron size*/
}
/*Change the four instances of 'top' below to rotate chevron*/
/*Use (top/right/bottom/left) where you want the back of the chevron to be*/
.chevron::before {
    top:0;
    border-top-color:#b00; /*Chevron Color*/
}
.chevron::after {
    top:-10px; /*Adjust thickness*/
    border-top-color:#fff; /*Match chevron background colour*/
}

<i class="chevron"></i>

p:before { content:"\2039"; }
p:after  { content:"\203A"; }

A different solution for this particular example (sans rotating and using chevron character codes)

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/