Bagaimana untuk Mencipta Segi Tiga Lutsinar dengan Sempadan dalam CSS?

Mencipta Segi Tiga Lutsinar dengan Sempadan Menggunakan CSS

Salah satu cabaran biasa dalam CSS ialah mencipta bentuk dengan sempadan. Satu bentuk sedemikian yang sukar untuk dibuat ialah segi tiga lutsinar dengan sempadan yang boleh dilihat.

Pendekatan Konvensional

Seperti yang anda nyatakan dalam soalan anda, satu pendekatan biasa ialah dengan gunakan sempadan untuk mencipta ilusi segi tiga:

.triangle:after {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  margin-top: 1px;
  margin-left: 2px;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid white;
}

.triangle:before {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-bottom: 12px solid black;
}

Walaupun kaedah ini boleh mencapai bentuk yang diingini, ia melibatkan penggunaan helah dengan sempadan, yang mungkin tidak sesuai dalam situasi tertentu.

Penyelesaian WebKit Sahaja

Untuk pendekatan yang lebih elegan, anda boleh menggunakan penyelesaian WebKit sahaja yang memanfaatkan aksara ▲:

.triangle {
  -webkit-text-stroke: 12px black;
  color: transparent;
  font-size: 200px;
}

Teknik ini menggunakan -webkit-text-stroke property untuk mencipta strok di sekeliling watak, menghasilkan bentuk seperti segi tiga. Sifat warna ditetapkan kepada lutsinar untuk menjadikan watak itu sendiri tidak kelihatan.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Segi Tiga Lutsinar dengan Sempadan dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!