arrows Archives - Lena Design

To create arrows with CSS follow the steps below:

Demo:

Right:

Left:

Up:

Down:

Examples:

Scroll down

Step1.

Add HTML

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

Step2.

Add CSS

.arrow {
  border: solid black;
  border-width: 0 3px 3px 0;
  padding: 3px;
  display: inline-block;
}

.right {
  transform: rotate(-45deg);
}

.left {
  transform: rotate(135deg);
}

.up {
  transform: rotate(-135deg);
}

.down {
  transform: rotate(45deg);
}

Enjoy coding!