Bagaimana untuk Mencipta Segitiga CSS Responsif dengan Lebar Peratusan?

Menjana Segitiga CSS Responsif dengan Peratusan Lebar

Masalah:

Membuat anak panah di bawah elemen menggunakan CSS boleh menjadi rumit kerana lebar sempadan untuk anak panah tidak boleh ditetapkan dalam piksel. Ini menyukarkan untuk mencapai segi tiga responsif.

Penyelesaian:

Untuk mencipta segi tiga responsif menggunakan CSS, anda boleh menggunakan pseudo yang condong dan diputar elemen.

Pelaksanaan:

1. Buat bekas luar:

   .btn {
     position: relative;
     display: inline-block;
     width: 100px;  /* Set a fixed width for demonstration purposes */
     height: 50px;
   }

2. Tambahkan segi tiga:

   .btn:after {
     content: "";
     position: absolute;
     bottom: -10px;
     left: 0;
     width: 0;
     height: 0;
     border-width: 10px 50px 0 50px;
     border-style: solid;
     border-color: gray transparent transparent transparent;   
   }

Versi Responsif:

Untuk menjadikan segi tiga responsif, ubah suai bekas luar dan gaya segi tiga seperti berikut :

1. Responsif Bekas:

   .btn {
     position: relative;
     display: inline-block;
     width: 50%;  /* Set a percentage width for responsiveness */
     height: 50px;
   }

2. Segi Tiga Responsif:

   .btn:after {
     top: 50px;  /* Adjust the top position */
     background-color: inherit;
     padding-bottom: 50%;
     width: 57.7%;
     transform-origin: 0 0;
     transform: rotate(-30deg) skewX(30deg);
   }

Nota: Sifat padding-bottom mengekalkan nisbah bidang segi tiga. Mengalih keluar lebar pada .btn membolehkan bentuk melaraskan saiznya berdasarkan kandungannya.

Pelaksanaan CSS ini mencipta segi tiga dengan lebar berasaskan peratusan yang mengekalkan nisbah bidangnya dan melaraskan saiznya berdasarkan dimensi bekas .

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