Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

creating a chevron in CSS

Tags:

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.

like image 283
Crystal Avatar asked Apr 11 '13 00:04

Crystal


People also ask

How do you make a chevron arrow in CSS?

Whether using <i> for this is right is debatable, but you can use span for this as well to be on the safe side. And so you can have an <i class="arrow" title="arrow icon"></i> in your text. This arrow is <i class="arrow" title="arrow icon"></i> used to be deliberately lowered slightly on request.

What is a chevron in code?

A "V"- or ">" marking that indicates more. Many software programs use chevron markings to expand a menu or view other options that may not currently be visible. For example, Microsoft Windows users may have two down arrows at the bottom of their menu to display any menu option that was not used recently.

How do you make an arrow shape in CSS?

Arrows. To create a simple arrow without a tail, make a box with a width and height, border, as well as zero left and top borders. To make an up arrow, add the transform: rotate(225deg); property, and to make a down arrow, add the transform: rotate(45deg); property to rotate the arrow to 225 and 45 degrees respectively ...


1 Answers

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

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

like image 139
JonShipman Avatar answered Sep 20 '22 14:09

JonShipman