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.
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.
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.
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 ...
p:before { content:"\2039"; } p:after { content:"\203A"; }
A different solution for this particular example (sans rotating and using chevron character codes)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With