How to Make a Chevron Arrow Using CSS

How to Make A Chevron Arrow Using CSS?

You can use the before or after pseudo-element and apply some CSS to it. There are various ways. You can add both before and after, and rotate and position each of them to form one of the bars. An easier solution is adding two borders to just the before element and rotate it using transform: rotate.

Scroll down for a different solution that uses an actual element instead of the pseuso elements

In this case, I've added the arrows as bullets in a list and used em sizes to make them size properly with the font of the list.

ul {    list-style: none;}
ul.big {    list-style: none;    font-size: 300%}
li::before {    position: relative;    /* top: 3pt; Uncomment this to lower the icons as requested in comments*/    content: "";    display: inline-block;    /* By using an em scale, the arrows will size with the font */    width: 0.4em;    height: 0.4em;    border-right: 0.2em solid black;    border-top: 0.2em solid black;    transform: rotate(45deg);    margin-right: 0.5em;}
/* Change color */li:hover {  color: red; /* For the text */}li:hover::before {  border-color: red; /* For the arrow (which is a border) */}

<ul>    <li>Item1</li>    <li>Item2</li>    <li>Item3</li>    <li>Item4</li></ul>
<ul class="big">    <li>Item1</li>    <li>Item2</li>    <li>Item3</li>    <li>Item4</li></ul>

creating a chevron in CSS

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/

Decrease angle of Chevron arrows?

&:before {
    left:0;
    border-width: $itemHeight/2 0 $itemHeight/2 $itemHeight/4;
    border-color: transparent transparent transparent #f2f2f2;
}
&:after {
    right:0;
    border-width: $itemHeight/2 0 $itemHeight/2 $itemHeight/4;
    border-color: #f2f2f2 transparent;
}

CodePen

Create Left Arrow with CSS before & after pseudo elements

You can rotate the arrow 180deg like this :

a {
    display: inline-block;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    padding: 10px 15px 10px 10px;
    position: relative;
    text-decoration: none;
}
.left{
  transform:rotate(180deg);
}

a:before, a:after {
    border-right: 2px solid;
    content: '';
    display: block;
    height: 8px;
    margin-top: -6px;
    position: absolute;
    transform: rotate(135deg);
    right: 10px;
    top: 50%;
    width: 0;
}

a:after {
    margin-top: -1px;
    transform: rotate(45deg);
}

a:hover, a:focus,
a:hover:before, a:hover:after,
a:focus:before, a:focus:after {
    color: #000;
}

<a class="arrow"></a>
<a class="arrow left"></a>

how to create arrow down/up in css

My proposal is:

.triangle_down {  width: 0;  height: 0;  border-left: 15px solid transparent;  border-right: 15px solid transparent;  border-top: 15px solid #2f2f2f;  font-size: 0;  line-height: 0;  float: left;}.triangle_down1 {  position: relative;  top: -5px;  content: "";  display: inline-block;  width: 15px;  height: 15px;  border-right: 0.2em solid black;  border-top: 0.2em solid black;  transform: rotate(135deg);  margin-right: 0.5em;  margin-left: 1.0em;} .triangle_up1 {   position: relative;   top: -5px;   content: "";   display: inline-block;   width: 15px;   height: 15px;   border-right: 0.2em solid black;   border-top: 0.2em solid black;   transform: rotate(-45deg);   margin-right: 0.5em;   margin-left: 1.0em; }

<div id="dialog1" class="triangle_down"></div><div id="dialog2" class="triangle_down1"></div><div id="dialog3" class="triangle_up1"></div>

Making the tip of a right chevron font-awesome icon touch end of div

This should do it for you!
Basically, create a class .fa-chevron-right and give it margin-right: -2px;

You can increase/decrease -2px to get the spacing to your liking!

.wrapper {  height: 100vh;  display: flex;  flex-direction: row;}
.sidebar {  flex: 00 50px;  background-color: #ccc;  text-align: right;}.content {  flex: 1;  background-color: #000;}.fa-chevron-right {  margin-right: -2px; }

<link href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" rel="stylesheet"/>    <div class="wrapper">          <div class="sidebar">      <i class="fas fa-chevron-right"></i>    </div>    <div class="content">          </div>    </div>

How to Make a Chevron Arrow Using CSS