Bagaimana untuk melaksanakan segi tiga dalam css

Cara melaksanakan segi tiga dalam css: 1. Gunakan sempadan untuk melaksanakan segi tiga Gunakan gabungan sempadan lutsinar dan sempadan pepejal untuk mencipta segi tiga dalam arah dan saiz yang berbeza 2. Gunakan elemen pseudo untuk melaksanakan segi tiga dan cipta kawasan penghunian dengan menggunakan unsur pseudo. Segi tiga pepejal separuh saiz elemen induk 3. Gunakan atribut transformasi untuk melaksanakan segi tiga, dan anda boleh mencipta segi tiga dengan sudut yang berbeza dengan melaraskan sudut putaran; segi tiga, dan anda boleh mencipta segi tiga bentuk yang berbeza dengan mentakrifkan koordinat berbilang titik.

Bentuk segi tiga boleh dilaksanakan dalam CSS dalam pelbagai cara, berikut adalah beberapa kaedah biasa:

Melaksanakan segi tiga menggunakan sempadan:

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}

Kaedah ini melaksanakan segi tiga dengan menetapkan sempadan elemen dan menggunakan sempadan telus Gabungan sempadan berwarna pepejal boleh mencipta segi tiga dengan orientasi dan saiz yang berbeza.

Melaksanakan segi tiga menggunakan unsur pseudo:

.triangle {
  position: relative;
  width: 100px;
  height: 100px;
}
.triangle::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border-width: 0 100px 100px 0;
  border-style: solid;
  border-color: transparent red transparent transparent;
}

Kaedah ini menghasilkan segi tiga pepejal yang mengambil separuh saiz unsur induk dengan menggunakan unsur pseudo::sebelumnya.

Gunakan atribut transformasi untuk melaksanakan segi tiga:

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
  transform: rotate(45deg);
}

Kaedah ini serupa dengan kaedah pertama, kecuali atribut transformasi digunakan untuk putaran Segitiga dengan sudut berbeza boleh dibuat dengan melaraskan sudut putaran.

Gunakan atribut laluan klip untuk melaksanakan segi tiga:

.triangle {
  width: 100px;
  height: 100px;
  background-color: red;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

Kaedah ini menjepit bentuk elemen dengan menggunakan atribut laluan klip Segitiga bentuk berbeza boleh dibuat dengan mentakrifkan koordinat berbilang titik.

Di atas adalah beberapa kaedah biasa Terdapat banyak cara untuk mencapai bentuk segitiga Anda boleh memilih kaedah yang sesuai mengikut keperluan khusus anda.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan segi tiga dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!