Bagaimana untuk Memusingkan Bekas Sambil Mengekalkan Teksnya Tidak Miring?

Cara Memusing Elemen Tetapi Pastikan Teks Biasa (Tidak Miring)

Mencipta Butang Miring dengan Teks Tidak Miring

Untuk mencipta elemen condong dengan teks tidak condong, anda boleh menggunakan transformasi kepada ibu bapa dan anak elemen:

Memiringkan Elemen Induk:

Gunakan sifat transformasi: skew() untuk memesongkan elemen induk (dalam kes ini, elemen

) .

Lepaskan Pencongan Anak Elemen:

Gunakan penjelmaan bertentangan pada elemen anak (elemen ) menggunakan penjelmaan: condong(-sudut), dengan sudut adalah nilai yang sama seperti digunakan pada elemen induk. Ini akan menyahskeping teks.

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

HTML:

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li class="active"><a href="#">Products</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

Keputusan:

Ini akan mencipta menu dengan butang senget tetapi teks tidak condong, membenarkan kesan bersudut tanpa memutarbelitkan kebolehbacaan pautan.

Atas ialah kandungan terperinci Bagaimana untuk Memusingkan Bekas Sambil Mengekalkan Teksnya Tidak Miring?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!