Mengapakah Segitiga Elemen Pseudo CSS Saya Bentuk yang Salah?

Mencipta Segitiga HTML/CSS dengan Elemen Pseudo

Semasa cuba mencipta bentuk segi tiga menggunakan elemen pseudo, anda menemui output yang salah. Anda memerhati bentuk yang tidak diingini dan bukannya bentuk yang diingini.

Untuk menangani isu ini, adalah penting untuk memahami punca yang berkaitan dengan penggunaan sempadan. Rujuk pautan yang disediakan tentang cara segitiga CSS berfungsi dan anda akan mendapat pemahaman yang lebih mendalam tentang gelagat sempadan dan kesannya pada output.

Penyelesaian alternatif yang berkesan mencipta segitiga melibatkan penggunaan putaran dan sempadan. Begini caranya:

.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>

Pendekatan ini menggabungkan elemen pseudo yang diputar dengan sempadan untuk menghasilkan bentuk segi tiga yang diingini. Sudut putaran yang ditentukan menentukan orientasi segi tiga.

Atas ialah kandungan terperinci Mengapakah Segitiga Elemen Pseudo CSS Saya Bentuk yang Salah?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!