Cara Membuat Panah/Arrows Pada Website

Reviewed by Sutiono S.Kom., M.Kom., M.T.I

by Hanifah Nurbaeti March 9, 2021

Di bawah ini kita akan mempelajari cara membuat panah dengan CSS.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.arrow {
  border: solid black;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
}

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

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

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

.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}
</style>
</head>
<body>

<h2>CSS Arrows</h2>

<p>Panah Ke Kanan: <i class="arrow right"></i></p>
<p>Panah Ke Kiri: <i class="arrow left"></i></p>
<p>Panah Ke Atas: <i class="arrow up"></i></p>
<p>Panah Ke Bawah: <i class="arrow down"></i></p>

</body>
</html>

Cara Membuat Panah

Langkah 1) Tambahkan HTML:
Contoh

<p>Panah Ke Kanan: <i class="arrow right"></i></p>
<p>Panah Ke Kiri: <i class="arrow left"></i></p>
<p>Panah Ke Atas: <i class="arrow up"></i></p>
<p>Panah Ke Bawah: <i class="arrow down"></i></p>

Langkah 2) Tambahkan CSS:
Contoh

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

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

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

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

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