Bagaimanakah saya boleh melukis segitiga di sudut div menggunakan sama ada piksel atau peratusan?

Melukis Segi Tiga di Sudut Div

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:

1. Letakkan elemen segi tiga secara mutlak dan tetapkan sifat atas dan kanannya kepada 0.
2. Tentukan dimensi segi tiga menggunakan jidar- sifat lebar dan warna sempadan. Contohnya, kod berikut melukis segitiga hijau di penjuru kanan sebelah atas menggunakan 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:

1. Letakkan elemen segi tiga secara relatif di dalam div.
2. Putar elemen segi tiga 45 darjah menggunakan transform: rotate(45deg).
3. Sembunyikan lebihan segitiga yang melangkaui sempadan div menggunakan limpahan: tersembunyi.

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!