Bagaimanakah Saya Boleh Mencipta Segitiga CSS Responsif dengan Lebar Berasaskan Peratusan?

Segitiga CSS Responsif dengan Lebar Berdasarkan Peratusan

Dalam CSS, kita boleh mencipta segitiga menggunakan sempadan dengan menetapkan lebar yang berbeza untuk bahagian atas dan sempadan bawah. Walau bagaimanapun, apabila menggunakan peratusan untuk lebar pautan, saiz anak panah tidak boleh dilaraskan secara dinamik berdasarkan kandungan pautan.

Penyelesaian: Segi Tiga Berasaskan Peratusan

Untuk mencipta segi tiga responsif yang menyesuaikan saiznya dengan kandungan pautan, kita boleh menggunakan elemen pseudo dengan condong dan berputar transformasi:

.btn {
  ...
  padding-bottom: 15%;
  ...
}

.btn:after {
  content: "";
  ...
  padding-bottom: 50%;
  ...
  transform: rotate(-30deg) skewX(30deg);
}

Penjelasan:

• Elemen pseudo diposisikan secara mutlak dan warna latar belakangnya diwarisi daripada pautan.
• Sifat padding-bottom (15% dalam contoh ini) menetapkan ketinggian segi tiga sebagai peratusan daripada pautan lebar.
• Memusing dan memutar segi tiga menghasilkan bentuk yang diingini.
• Indeks z negatif memastikan bahawa segi tiga berada di belakang kandungan pautan.

Faedah:

• Saiz segi tiga dilaraskan secara automatik berdasarkan lebar pautan.
• Nisbah bidang segi tiga dikekalkan.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencipta Segitiga CSS Responsif dengan Lebar Berasaskan Peratusan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!