Bagaimanakah Saya Boleh Mencipta Segitiga HTML/CSS Sempurna Menggunakan Pseudo-elements dan Borders?

Mencipta Segitiga HTML/CSS dengan Elemen Pseudo

Apabila cuba membuat segi tiga menggunakan elemen pseudo, anda mungkin menghadapi cabaran dalam menjajarkan elemen dengan betul. Kunci untuk menyelesaikan isu ini terletak pada pemahaman cara sempadan digunakan dalam CSS.

Dalam coretan kod yang disediakan, isu timbul daripada penggunaan sempadan. Untuk mencipta segi tiga, anda memerlukan dua sempadan bertentangan, seperti kiri dan kanan, untuk membentuk tapak. Walau bagaimanapun, sempadan bawah digunakan sepanjang keseluruhan elemen, menghasilkan bentuk yang herot.

Pendekatan alternatif ialah menggunakan putaran dan sempadan. Berikut ialah 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);
}

Di sini, sempadan-atas dan sempadan-kiri mencipta bentuk segi tiga, manakala penjelmaan rotate() memesongkan bentuk menjadi segi tiga. Kedudukan: sifat mutlak dan kiri dan atas menjajarkan segi tiga dengan tepat.

Dengan memahami mekanik sempadan dan putaran, anda boleh mencipta bentuk rumit menggunakan unsur pseudo dengan berkesan.

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