Bagaimanakah Saya Boleh Memusingkan Latar Belakang Elemen Sambil Menjaga Teksnya Dijajarkan Secara Mendatar menggunakan CSS?

Buat Elemen Serong Sambil Mengekalkan Penjajaran Teks

Dalam bidang CSS, mencapai kesan visual tertentu memerlukan pemikiran yang inovatif. Salah satu kesan sedemikian ialah mencipta elemen senget tanpa memutarbelitkan teks yang terkandung di dalamnya.

Bayangkan anda ingin meniru imej di bawah, dengan latar belakang coklat muncul secara menyerong apabila anda menuding pada item menu:

[ Imej item menu coklat senget dengan teks putih]

Untuk mencapainya, anda boleh menggunakan gabungan condong dan songsang senget. Kuncinya terletak pada menerapkan skew() pada elemen induk (dalam kes ini, li) dan skew(-deg) pada elemen anaknya (tag anchor, a). Ini membatalkan pencongan, memastikan teks kekal mendatar semasa latar belakang bersudut.

Berikut ialah CSS yang berkaitan:

nav li {
  transform: skew(20deg);
}

nav li a {
  transform: skew(-20deg);
}

Selain itu, anda boleh menambah keadaan tuding untuk menukar warna latar belakang dan warna teks apabila pengguna menuding pada item menu:

nav li:hover {
  background: #1a0000;
  color: #fff;
}

Dengan menggabungkan teknik CSS ini, anda boleh mencipta elemen condong yang menarik secara visual sambil mengekalkan penjajaran teks yang betul.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Memusingkan Latar Belakang Elemen Sambil Menjaga Teksnya Dijajarkan Secara Mendatar menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!