Bagaimanakah Saya Boleh Memusingkan Elemen CSS Sambil Mengekalkan Penjajaran Teks Sempurna?

Memusingkan Elemen dengan Penjajaran Teks Terpelihara

Dalam CSS, elemen boleh dicondongkan sambil mengekalkan penjajaran teksnya. Teknik ini amat berguna apabila membuat butang menu dengan sempadan pepenjuru, seperti yang ditunjukkan dalam imej di bawah.

Untuk mencapai kesan ini, ikut langkah berikut:

1. Skew the Induk Elemen: Gunakan transformasi: skew(); kepada elemen induk (cth., li dalam contoh ini) untuk mencondongkannya pada sudut tertentu.
2. Songsangkan Elemen Kanak-kanak: Gunakan transformasi: condong(-sudut); kepada elemen anak (cth., a dalam contoh ini) untuk menterbalikkan condong dan memulihkan penjajaran teks.

Berikut ialah contoh kod:

nav ul {
  padding: 0;
  display: flex;
  list-style: none;
}
nav li {
  transition: background 0.3s, color 0.3s;
  transform: skew(20deg); /* SKEW */
}

nav li a {
  display: block; /* block or inline-block is needed */
  text-decoration: none;
  padding: 5px 10px;
  font: 30px/1 sans-serif;
  transform: skew(-20deg); /* UNSKEW */
  color: inherit;
}

nav li.active,
nav li:hover {
  background: #000;
  color: #fff;
}

Kod ini mencipta menu dengan butang senget dan sempadan pepenjuru. Apabila menuding di atas butang, ia menjadi hitam dan warna teks bertukar kepada putih, menunjukkan kesan senget songsang.

Dengan memahami teknik ini, anda boleh mencipta elemen menu yang menarik secara visual dengan sempadan pepenjuru dan mengekalkan penjajaran teks yang sempurna.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Memusingkan Elemen CSS Sambil Mengekalkan Penjajaran Teks Sempurna?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!