Bagaimanakah Saya Boleh Melukis Segi Tiga di Sudut Div Menggunakan Kedudukan Mutlak?

Menggunakan Kedudukan Mutlak untuk Melukis Segi Tiga

Anda boleh melukis segi tiga dengan mudah di sudut div dengan menggunakan kedudukan mutlak. Untuk pendekatan yang lebih dinamik, pertimbangkan untuk menggunakan nilai peratusan dan bukannya nilai piksel tetap.

Pelaksanaan

Untuk mencapai hasil yang diingini, ikut langkah berikut:

1. Tetapkan kedudukan : mutlak kepada elemen segi tiga.
2. Tetapkan sifat atas dan kanan kepada 0. Ini akan meletakkan segi tiga di sudut kanan atas bekas.
3. Gunakan sifat jidar-* untuk mencipta bentuk segi tiga itu. Tetapkan lebar sempadan kepada "0 30px 30px 0" dan warna sempadan kepada "transparent #608A32 transparent transparent". Ini akan mencipta segi tiga tepat dengan isi hijau.

Kod Contoh

<code class="html"><div class="container">
  <div class="triangle"></div>
</div></code>

<code class="css">.container {
  position: absolute;
  top: 5%;
  left: 5%;
  width: 60%;
  height: 30%;
  background: black;
  color: white;
  border-radius: 12px;
  overflow: hidden;
}

.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>

Nota Tambahan

Menggunakan kaedah ini membolehkan fleksibiliti dalam kedudukan dan menggayakan segi tiga, menjadikannya penyelesaian serba boleh untuk keperluan reka bentuk dan saiz bekas yang berbeza.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Melukis Segi Tiga di Sudut Div Menggunakan Kedudukan Mutlak?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!