Kuinka luoda: CSS-nuolia

Opi, kuinka luoda nuolia CSS:llä.

Oikea nuoli:

Vasen nuoli:

Ylös nuoli:

Alas nuoli:

Kuinka luoda nuolia

Ensimmäinen vaihe - Lisää HTML:

<p>Oikea nuoli: <i class="arrow right"></i></p>
<p>Vasen nuoli: <i class="arrow left"></i></p>
<p>Nousunnuoli: <i class="arrow up"></i></p>
<p>Pudotusnuoli: <i class="arrow down"></i></p>

Toinen vaihe - Lisää CSS:

.arrow {
  border: solid musta;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
{}
.right {
  transform: kierto(-45aste);
  -webkit-transform: kierto(-45aste);
{}
.left {
  transform: kierto(135aste);
  -webkit-transform: kierto(135aste);
{}
.up {
  transform: kierto(-135aste);
  -webkit-transform: kierto(-135aste);
{}
.down {
  transform: kierto(45aste);
  -webkit-transform: rotate(45deg);
{}

Kokeile itse