How To Create Arrows Using CSS

Now I am showing how to create array without using images and, JavaScript. CSS is best way to use create arrow Because you need just some few lines of code and you don’t create a request for loading images.You can fallow the below example to create arrows

Example


<!DOCTYPE html>
<html>
<head>
<style>

i{
  border:       solid currentColor;
  border-width: 0 .2em .2em 0;
  display:      inline-block;
  padding:      .20em;
}
.arr-right {transform:rotate(-45deg);  -webkit-transform:rotate(-45deg);}
.arr-left  {transform:rotate(135deg);  -webkit-transform:rotate(135deg);}
.arr-up    {transform:rotate(-135deg); -webkit-transform:rotate(-135deg);}
.arr-down  {transform:rotate(45deg);   -webkit-transform:rotate(45deg);}
</style>
</head>
<body>

<p>Right arrow: <i class="arr-right"></i></p>
<p>Left arrow: <i class="arr-left"></i></p>
<p>Up arrow: <i class="arr-up"></i></p>
<p>Down arrow: <i class="arr-down"></i></p>

</body>
</html>

Home

Example