Bagaimanakah Saya Boleh Mencipta Anak Panah Antara Halaman Aktif dalam Wizard CSS Sahaja Menggunakan Elemen Pseudo Sahaja?

Mencipta Anak Panah dalam CSS Sahaja

Masalah:

Dalam proses pesanan seperti wizard , terdapat menu dengan halaman aktif yang diserlahkan dengan warna hijau. Matlamatnya adalah untuk mencipta anak panah yang menunjuk dari satu halaman aktif ke halaman seterusnya, hanya menggunakan CSS.

Penyelesaian:

Menggunakan :sebelum dan :selepas Pseudo -Elemen

Daripada menggunakan berbilang

s dan imej, anda boleh gunakan elemen pseudo CSS (:sebelum dan :selepas) untuk menjana anak panah tanpa menambah elemen tambahan pada DOM. Teknik ini melibatkan mencipta segi empat sama diputar dengan sempadan yang dikehendaki dan meletakkannya dengan sewajarnya.

#flowBoxes div {
  display: inline-block;
  position: relative;
  height: 25px;
  line-height: 25px;
  padding: 0 20px;
  border: 1px solid #ccc;
  margin-right: 2px;
}

#flowBoxes div.right:after {
  content: '';
  border-top: 1px solid #ccc;
  border-right: 1px solid #ccc;
  width: 18px;
  height: 18px;
  position: absolute;
  right: 0;
  top: -1px;
  background-color: white;
  z-index: 150;
  transform: translate(10px, 4px) rotate(45deg);
}

#flowBoxes div.left:before {
  content: '';
  border-top: 1px solid #ccc;
  border-right: 1px solid #ccc;
  width: 18px;
  height: 18px;
  position: absolute;
  left: 0;
  top: -1px;
  background-color: white;
  z-index: 50;
  transform: translate(-10px, 4px) rotate(45deg);
}

Menggayakan Halaman Aktif

Untuk memberikan halaman aktif anak panah hijau, gunakan gaya berikut:

.active {
  background-color: green;
  color: white;
}

.active:after {
  background-color: green;
}

Pendekatan ini mencipta anak panah yang diingini sambil mengekalkan warna pepejal ruang antara mereka.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencipta Anak Panah Antara Halaman Aktif dalam Wizard CSS Sahaja Menggunakan Elemen Pseudo Sahaja?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!