html - creating a chevron in CSS

Question

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 1

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>