Rumah > hujung hadapan web > tutorial css > Bagaimana untuk Memusingkan Bekas Sambil Mengekalkan Teksnya Tidak Miring?

Bagaimana untuk Memusingkan Bekas Sambil Mengekalkan Teksnya Tidak Miring?

Linda Hamilton
Lepaskan: 2024-12-23 10:11:44
asal
983 orang telah melayarinya

How to Skew a Container While Keeping Its Text Unskewed?

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;
    }
    Salin selepas log masuk

    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>
    Salin selepas log masuk

    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!

  • sumber:php.cn
    Kenyataan Laman Web ini
    Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
    Artikel terbaru oleh pengarang
    Tutorial Popular
    Lagi>
    Muat turun terkini
    Lagi>
    kesan web
    Kod sumber laman web
    Bahan laman web
    Templat hujung hadapan