Rumah > Artikel > hujung hadapan web > Bagaimanakah Saya Boleh Mencipta Segi Tiga dalam Sudut Div Menggunakan Peratusan?
Melukis Segi Tiga di Sudut Div dengan Peratusan
Mencipta segitiga di sudut div boleh dicapai dengan kedudukan relatif dan manipulasi sempadan. Begini caranya:
1. Bekas:
<code class="css">.container { position: absolute; // Absolute positioning ... // Other styling overflow: hidden; // Conceal overflowing elements }</code>
2. Segitiga: Menggunakan Sifat Kanan dan Atas
<code class="css">.triangle { position: absolute; // Absolute positioning right: 0; // Anchor to right edge top: 0; // Anchor to top edge ... // Other styling }</code>
3. Segitiga: Menggunakan Sempadan Tersuai
<code class="css">.triangle { width: 0; // Zero width height: 0; // Zero height border-style: solid; // Solid border border-width: 0 30px 30px 0; // Set border widths border-color: transparent #608A32 transparent transparent; // Transparent sides and green base }</code>
Dengan memanfaatkan sifat ini, anda boleh mencipta segi tiga tajam tanpa menyatakan nilai piksel eksplisit. Pendekatan ini memastikan kedudukan dan saiz segi tiga yang konsisten dalam kedua-dua bekas mutlak dan berasaskan peratusan.
Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencipta Segi Tiga dalam Sudut Div Menggunakan Peratusan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!