Bagaimanakah Saya Boleh Membuat Segitiga Dengan Betul Menggunakan HTML/CSS Pseudo-elements?

Mencipta Segitiga dengan Elemen Pseudo dalam HTML/CSS

Apabila cuba mencipta bentuk segitiga menggunakan unsur pseudo, sesetengah pengguna mungkin menemui hasil yang tidak dijangka . Artikel ini bertujuan untuk menangani isu biasa dan menyediakan penyelesaian alternatif.

Kod awal yang disediakan, yang menggunakan sifat sempadan, gagal menghasilkan segi tiga yang diingini disebabkan oleh batasan model sempadan. Untuk segi tiga, pendekatan alternatif disyorkan.

Menggunakan Putaran dan Sempadan

Untuk mencipta segi tiga menggunakan kaedah ini, ikut langkah berikut:

1. Tentukan elemen induk dengan sempadan untuk berfungsi sebagai tapak segi tiga.
2. Buat elemen pseudo dalam elemen induk dan letakkannya di atas dan sedikit ke sisi tapak.
3. Gunakan penjelmaan: sifat putar(45deg) untuk memutarkan elemen pseudo sebanyak 45 darjah.
4. Tambah sempadan pada pseudo elemen, meninggalkan bahagian kanan yang jelas untuk membentuk puncak segi tiga.

Untuk contoh:

.box {
  border: 1px solid;
  margin: 50px;
  height: 50px;
  position: relative;
  background: #f2f2f5;
}

.box:before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border-top: 1px solid;
  border-left: 1px solid;
  top: -11px;
  left: 13px;
  background: #f2f2f5;
  transform: rotate(45deg);
}

<div class="box">

</div>

Kaedah ini memanfaatkan sifat putaran untuk mencipta bentuk segi tiga yang diingini dengan berkesan.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membuat Segitiga Dengan Betul Menggunakan HTML/CSS Pseudo-elements?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!