Bagaimana untuk Mencipta Segitiga CSS Sempurna Menggunakan Pseudo-elements?

Bentuk Segi Tiga CSS dengan Elemen Pseudo

Dalam percubaan untuk meniru bentuk segi tiga menggunakan elemen pseudo, seseorang mungkin menghadapi kesukaran seperti yang ditunjukkan dalam tangkapan skrin yang disediakan. Untuk menyelesaikan masalah ini, mari kita terokai pendekatan alternatif.

Kod asal menggunakan sempadan untuk mencipta segi tiga. Walau bagaimanapun, sempadan tidak sesuai untuk tujuan ini kerana sifat yang wujud. Sebaliknya, gabungan putaran dan sempadan boleh menghasilkan hasil yang lebih tepat.

Coretan kod berikut menawarkan penyelesaian:

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

Kod ini meletakkan elemen pseudo seperti yang dikehendaki, menggunakan putaran untuk mencipta bentuk segi tiga. Sifat sempadan memastikan ketepatan dimensi bentuk.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Segitiga CSS Sempurna Menggunakan Pseudo-elements?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!