Bagaimana untuk membuat: CSS penjuru

Belajar bagaimana untuk menggunakan CSS untuk membuat penjuru.

Penjuru kanan:

Penjuru kiri:

Penjuru atas:

Penjuru bawah:

Bagaimana untuk membuat penjuru

Keseluruhan ke-1 - Tambahkan HTML：

<p>Penjuru kanan: <i class="arrow right"></i></p>
<p>Penjuru kiri: <i class="arrow left"></i></p>
<p>Penjuru atas: <i class="arrow up"></i></p>
<p>Penjuru bawah: <i class="arrow down"></i></p>

Keseluruhan ke-2 - Tambahkan CSS：

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

Try it yourself