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.

Was there something wrong with my answer?
– Alex W
Apr 16 '13 at 18:34

@AlexW No there was nothing wrong with it. I just ended up seeing Fis' anwer first and it made a little more sense to me. But your answer worked fine. Thanks!
– Crystal
Apr 20 '13 at 19:02

Have you figured out a way to add text on top of the chevron?
– MattCamp
Nov 6 '14 at 15:47

12 Answers
12

Just do a rotate(90deg) on #chevron :

rotate(90deg)

#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/

Manage, create and control chevrons using CSS borders

Follow the notes in the example to change the results.

Parameters that can get altered:

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

<i class="Chevron"></i>

This overlaps a triangle with another triangle. It is not helpful if the background is a multitude of colors. I can't talk about how efficient it is, but because of that, it's not robust.
– vol7ron
Sep 3 '14 at 17:24

what do you mean by change four top values?
– Antonio Max
Jul 4 '15 at 18:37

This answer would get much more upvotes (all it deserves) if it wouldn't look like an advertising-seo-spam site.
– kaiser
Feb 5 '16 at 20:12

@kaiser Thanks for your comments. I am always looking for ways to make my answers clearer and more concise. Which points do you feel are failing me here and where could it be improved?
– Obsidian
Feb 8 '16 at 8:53

Maybe >>> CLICK FOR DEMO <<< for starters. "Working jsFiddle" would be enough as plain link
– kaiser
Feb 8 '16 at 13:43

Here are two other ways to make a chevron with CSS. These do not use transform or rotate so it's compatible with IE8+, but the caveat is that you have to set the color of the chevron AND the color of the background that the chevron is sitting on:

CSS Chevron - Two Triangles

.chevron {
display:inline-block;
width: .5em;
height: .8em;
position:relative;
}
.chevron:before,
.chevron:after {
display:block;
content:"";
width:0;
height:0em;
border-style:solid;
position:absolute;
}
.chevron:before {
right:0;
border-width:.4em 0 .4em .4em;
border-color:transparent transparent transparent red;
}
.chevron:after {
left:0;
border-width:.4em 0 .4em .4em;
border-color:transparent transparent transparent #fff;
}
.chevron.skinny {
width:.4em;
}
.chevron.fat {
width:.6em;
}


CSS Chevron - Three Triangles

.chevron {
display:inline-block;
background:red;
width: .55em;
height: .75em;
position:relative;
}
.chevron:before,
.chevron:after {
display:inline-block;
content:"";
width:0;
height:0em;
border-style:solid;
position:absolute;
}
.chevron:before {
left:0;
border-width:.4em 0 .4em .4em;
border-color:transparent transparent transparent #fff;
}
.chevron:after {
right:0;
border-width:.4em 0 .4em .4em;
border-color:#fff transparent;
}
.chevron.skinny {
width:.4em;
}
.chevron.fat {
width:.7em;
}


These are awesome! Trying to get them pointing down, any suggestions?
– cfx
Sep 6 '13 at 16:47

Nevermind, if you change the body background then the hack reveals itself and there's no way to make it a true chevron :-(
– cfx
Sep 6 '13 at 21:04

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


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

You can use CSS glyph ⟩ , ⟨
http://css-tricks.com/snippets/html/glyphs/

⟩ , ⟨

is such a long code so i made this fiddle
basically is made using :before and :after pseudo selectors

:before

:after

Is there a way to use this technic, but add text on top of the shape?
– MattCamp
Nov 5 '14 at 19:18

Thank you Obsidian for your answer. I have converted it into a Sass mixin, so you can easily pass settings through it to generate your arrrows.

/* $class outputs the selector, do not place mixin within a rule
$dir == up, down, left or right,
$bg == background-color of arrow container
*/

@mixin arrow($class, $size, $weight, $color, $dir, $bg) {
@if $dir == up {
$dir : bottom;
}
@elseif $dir == down {
$dir : top;
}
@elseif $dir == right {
$dir : left;
}
@else {
$dir : right;
}

.#{$class} {
position:relative;
display:block;
height: $size * 2;
}

.#{$class}:before,
.#{$class}:after {
position:absolute;
display:block;
content:"";
/*Size*/
border:$size solid transparent;
}

.#{$class}:before {
#{$dir}:0;
/*Arrow Color*/
border-#{$dir}-color:$color;
}

.#{$class}:after {
/*Thickness*/
#{$dir}:-$weight;
border-#{$dir}-color:$bg;
}
}


Example usage:

@include arrow(arrow-right, 25px, 5px, #cecece, right, #fff);


If you're not opposed to using an existing solution, FontAwesome has this and other glyphs in a icon-font you can leverage in your markup: http://fortawesome.github.io/Font-Awesome/#icon/icon-chevron-down

You would use it like so (after following the instructions to include the required files):

<i class="icon-chevron-down"></i>

<i class="icon-chevron-down"></i>

OK so i needed to be able to reuse the chevron without repeating an ID. . .so here's what i came up with (thanks Yenn). (i need small chevrons for my app).

it uses a class instead of an ID tag, also uses a cascading class to flip it left. . . instead of doubling up my css code.

.chevron {
position: relative;
padding: 0px;
height:17px;
width: 6px;
margin-left:0px;
margin-top:0px;
}

.chevron:before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 50%;
width: 100%;
background: gray;
-webkit-transform: skew(25deg, 0deg);
-moz-transform: skew(25deg, 0deg);
-ms-transform: skew(25deg, 0deg);
-o-transform: skew(25deg, 0deg);
transform: skew(25deg, 0deg);
}

.chevron:after {
content: '';
position: absolute;
top: 50%;
right: 0;
height: 50%;
width: 100%;
background: gray;
-webkit-transform: skew(-25deg, 0deg);
-moz-transform: skew(-25deg, 0deg);
-ms-transform: skew(-25deg, 0deg);
-o-transform: skew(-25deg, 0deg);
transform: skew(-25deg, 0deg);
}

.rotate180
{
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);

}


http://jsfiddle.net/n5Fd8/

I found all these solutions to be a bit more complicated and/or less flexible than what I was looking for (in terms of size and/or thickness), so I wanted to share the code I used. I also included a Hover state for use with links.

Hover

Link to Fiddle

CSS

.chevron a:before {
border-style: solid;
border-width: 0.1em 0.1em 0 0; /* Line thickness */
content: '';
display: inline-block;
height: 5em; /* Arrow size; Height & Width must remain equal */
width: 5em;
left: 0.15em;
position: relative;
transform: rotate(-45deg);
color: #808080;
}

/* Hover State */
.chevron a:hover:before {
content: '';
color: black;
}

/* Right Arrow */
.chevron.right a:before {
left: 0;
transform: rotate(45deg);
}

/* Down Arrow */
.chevron.bottom a:before {
top: 0;
transform: rotate(135deg);
/* To position at top of element, compensate for rotation with margin-top: -2.5em; */
}


HTML





CSS3-free, doing it old-school with borders:

.chevron {
display: inline-block;
vertical-align: middle;
}
.chevron:before,
.chevron:after {
content: '';
display: block;
overflow: hidden;
height: 0;
width: 0;
border: solid black 20px;
}
.chevron.up:before,
.chevron.up:after {
border-bottom-width: 12px;
border-top-width: 0;
}
.chevron.up:before,
.chevron.down:after {
border-left-color: transparent;
border-right-color: transparent;
}
.chevron.up:after {
border-top-width: 7px;
border-bottom-color: transparent;
}
.chevron.down:before,
.chevron.down:after {
border-top-width: 12px;
border-bottom-width: 0;
}
.chevron.down:before {
border-bottom-width: 7px;
border-top-color: transparent;
}
.chevron.left:before,
.chevron.left:after,
.chevron.right:before,
.chevron.right:after {
display: inline-block;
}
.chevron.left:before,
.chevron.left:after {
border-right-width: 12px;
border-left-width: 0;
}
.chevron.left:before,
.chevron.right:after {
border-top-color: transparent;
border-bottom-color: transparent;
}
.chevron.left:after {
border-left-width: 7px;
border-right-color: transparent;
}
.chevron.right:before,
.chevron.right:after {
border-left-width: 12px;
border-right-width: 0;
}
.chevron.right:before {
border-right-width: 7px;
border-left-color: transparent;
}

<span class="chevron down"></span>
<span class="chevron up"></span>
<span class="chevron right"></span>
<span class="chevron left"></span>

Another possibility not mentioned so far is an inline svg, e.g.

.breadcrumb::after {
background-color: #b71c1c;
width: calc((2/9)*3em);
height: 3em;
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 9'%3E%3Cpath d='M-.1 0L2 4.5L-.1 9Z' fill='%237f0000'/%3E%3C/svg%3E");
}


I'm not really a css guy, which may explain why I find this easier to understand and tweak than any of the other suggestions.

Here's a really nice tool for quickly whipping up your svg and escaping it for copy-paste into your css.

This method is also really flexible, because you can draw pretty much anything you want, and e.g. have complete control over the angle at the apex of your chevron which (I think) is not the case with the other methods here.

Another simple example:

.profile_menu::before {
margin-right: 0.5em;
background-color: #b71c1c;
width: calc((2/10)*3em);
height: 3em;
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='width:100%25; height:100%25' viewBox='0 0 2 10'%3E%3Ccircle cx='8' cy='5' r='8' fill='%237f0000'/%3E%3C/svg%3E");
}


The biggest drawback I've found so far is having to specify the fill colour in the svg. It would be nice if there's a way around this, but I didn't need it, so didn't spend too much time trying.

Note on compatibility: At time of writing it works in latest firefox (60.0.2), safari (11.1.1), and chrome (67.0.3396.87) on desktop, and chrome/safari on android/ios respectively. That's all I've tested so far.

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.