Bagaimana membuat: Panah CSS

Belajar bagaimana menggunakan CSS untuk membuat panah.

panah kanan:

panah kiri:

panah naik:

panah turun:

Bagaimana membuat panah

Langkah pertama - Tambahkan HTML：

<p>panah kanan: <i class="arrow right"></i></p>
<p>panah kiri: <i class="arrow left"></i></p>
<p>panah naik: <i class="arrow up"></i></p>
<p>panah turun: <i class="arrow down"></i></p>

Langkah kedua - Tambahkan CSS：

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

Coba sendiri