Arrows css

by Andrey Izman

HTML

This is <i class="arr-right"></i> .arr-right<br>
<br>
This is <i class="arr-left"></i> .arr-left<br>
<br>
This is <i class="arr-up"></i> .arr-up<br>
<br>
This is <i class="arr-down"></i> .arr-down

CSS

body{
  font-size: 25px; /* Change font and  see the magic! */
  color: #f07;     /* Change color and see the magic! */
} 

/* RESPONSIVE ARROWS */
[class^=arr-]{
  border:       solid currentColor;
  border-width: 0 2px 2px 0;
  display:      inline-block;
  padding:      8.5px;
}
.arr-right {transform:rotate(-45deg);}
.arr-left  {transform:rotate(135deg);}
.arr-up    {transform:rotate(-135deg);}
.arr-down  {transform:rotate(45deg);}