Bagaimanakah Saya Boleh Mencipta Anak Panah Antara Halaman Aktif dalam Wizard CSS Sahaja Menggunakan Elemen Pseudo Sahaja?-tutorial css-php.cn

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

Mary-Kate Olsen

Lepaskan： 2024-12-14 21:29:14

asal

430 orang telah melayarinya

How Can I Create Arrows Between Active Pages in a CSS-Only Wizard Using Only Pseudo-elements?

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);
}

Salin selepas log masuk

Menggayakan Halaman Aktif

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

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

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

Salin selepas log masuk

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!