Mengapa Segitiga Elemen Pseudo CSS Saya Diherotkan, dan Bagaimana Saya Boleh Membaikinya?

Segitiga dengan Elemen Pseudo CSS: Penyelesaian Masalah dan Penyelesaian Alternatif

Dalam percubaan untuk mencipta bentuk segi tiga menggunakan elemen pseudo, pengguna menemui hasil yang tidak dijangka, membawa kepada segi tiga yang herot. Isu ini berpunca daripada penggunaan sempadan. Untuk memahami sebabnya, rujuk penjelasan komprehensif ini: Bagaimanakah segitiga CSS berfungsi?

Untuk menangani perkara ini, pendekatan alternatif ialah memanfaatkan putaran dan sempadan:

.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);
}

Alternatif ini menggunakan sifat sempadan untuk mencipta bentuk segi tiga dan meletakkannya menggunakan terjemahan. Selain itu, ia menggabungkan putaran untuk mencapai sudut yang diingini.

Atas ialah kandungan terperinci Mengapa Segitiga Elemen Pseudo CSS Saya Diherotkan, dan Bagaimana Saya Boleh Membaikinya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!