Rumah >hujung hadapan web >tutorial css >Bagaimanakah saya boleh melukis segitiga di sudut div menggunakan sama ada piksel atau peratusan?

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

Mary-Kate Olsen
Mary-Kate Olsenasal
2024-11-03 02:29:291017semak imbas

How can I draw triangles in the corner of a div using either pixels or percentages?

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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn