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!