Rumah >hujung hadapan web >tutorial css >Bagaimanakah saya boleh melukis segitiga di sudut div menggunakan sama ada piksel atau peratusan?
Soalan:
Dalam halaman web, bagaimana anda boleh melukis segitiga di sudut div menggunakan sama ada nilai piksel tertentu atau nilai peratusan?
Jawapan:
Terdapat dua pendekatan utama untuk mencapai ini:
Menggunakan Kedudukan Mutlak dan Helah Sempadan:
<code class="css">.triangle { width: 0; height: 0; border-style: solid; border-width: 0 30px 30px 0; border-color: transparent #608A32 transparent transparent; right: 0; top: 0; position: absolute; }</code>
Menggunakan Putaran dan Keratan:
Berikut ialah contoh menggunakan pendekatan ini:
<code class="css">.container { position: absolute; top: 5%; left: 5%; width: 60%; height: 30%; background: black; color: white; border-radius: 12px; overflow: hidden; } .triangle { position: relative; top: 10%; left: 90%; width: 10%; height: 10%; -webkit-transform: rotate(45deg); background: green; }</code>
Kedua-dua kaedah membenarkan penyesuaian bentuk dan kedudukan segi tiga menggunakan peratusan atau nilai mutlak, memberikan fleksibiliti dalam halaman web reka bentuk.
Atas ialah kandungan terperinci Bagaimanakah saya boleh melukis segitiga di sudut div menggunakan sama ada piksel atau peratusan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!