pelaksanaan segi tiga css

CSS ialah bahagian penting dalam pembangunan bahagian hadapan. Sama ada penetapan taip, reka letak atau reka bentuk gaya, CSS diperlukan. Dalam reka bentuk gaya, kita selalunya perlu menggunakan grafik pelbagai bentuk, termasuk segi empat tepat, bulatan, segi tiga, dsb. Mencapai bentuk segitiga ialah teknologi khusus dalam CSS Hari ini kita akan membincangkan cara menggunakan CSS untuk merealisasikan bentuk segi tiga.

1. Gunakan atribut sempadan untuk melaksanakan segi tiga

Atribut sempadan CSS membolehkan kami mentakrifkan sempadan kotak. Kita boleh menggunakan ciri-ciri atribut ini untuk mencapai bentuk segi tiga. Kaedah pelaksanaan khusus adalah seperti berikut:

.triangle {
  width: 0;
  height: 0;
  border-width: 20px 20px 0 20px;
  border-style: solid;
  border-color: #000 transparent transparent transparent;
}

Mula-mula, kita mentakrifkan kotak dengan lebar dan ketinggian 0. Kotak ini ialah segitiga kita. Kemudian, kami menentukan sifat lebar sempadan, menetapkan sempadan bawah segi tiga kepada lebar 20px, sempadan kiri dan kanan kepada lebar 20px dan sempadan atas kepada 0. Dengan cara ini, kita mendapat segi tiga sama kaki dengan panjang sisi bawah 40px dan ketinggian 20px. Seterusnya, kami menetapkan warna sempadan kepada hitam dan warna sempadan atas kepada telus, sekali gus melengkapkan segi tiga mudah.

2. Gunakan kelas pseudo untuk melaksanakan segi tiga

Segitiga yang dilaksanakan melalui kaedah di atas agak mudah, tetapi hanya segi tiga sama kaki boleh diperolehi. Jika kita ingin melaksanakan bentuk segitiga lain, atau perlu menambah teks atau ikon padanya, kita perlu menggunakan kelas pseudo.

Kita boleh menggunakan ::before dan ::after untuk melanjutkan pemilih kelas pseudo sesuatu elemen. Melalui dua pemilih kelas pseudo ini, kita boleh menjana elemen baharu di dalam elemen dan menetapkan gaya pada elemen baharu.

Kita boleh menggunakan ::before atau ::after untuk menjana segitiga dan mentakrifkan bentuk segi tiga dengan menetapkan sifat lebar, tinggi dan sempadan. Pada masa yang sama, kami juga boleh menetapkan kontras warna sempadan dan warna bekas untuk mencapai gaya segi tiga yang berbeza.

.triangle {
  position: relative;
  width: 40px;
  height: 40px;
  background-color: #000;
}

.triangle::before {
  content: "";
  width: 0;
  height: 0;
  border-width: 0 20px 20px 20px;
  border-style: solid;
  border-color: transparent transparent #fff transparent;
  position: absolute;
  bottom: -20px;
  left: 0;
}

Dalam kod di atas, kami mula-mula menentukan bekas dengan lebar dan tinggi 40px dan warna latar belakang hitam. Seterusnya, kami menggunakan kelas pseudo ::before untuk menjana segitiga, tetapkan sempadan atas segitiga kepada putih dan tetapkan sempadan kanan, sempadan kiri dan sempadan bawah kepada telus. Kedudukan segi tiga dicapai dengan menetapkan bahagian bawah dan kiri.

3. Gunakan atribut clip-path untuk melaksanakan segitiga

Dalam CSS3, kita juga boleh menggunakan atribut clip-path untuk melaksanakan bentuk segitiga. Atribut clip-path boleh mentakrifkan kawasan keratan elemen dan klip kawasan paparan elemen mengikut laluan yang ditentukan untuk mencapai bentuk yang berbeza.

Kita boleh menggunakan fungsi poligon() untuk mentakrifkan poligon. Fungsi ini menerima bilangan parameter yang tidak ditentukan Setiap parameter ialah nilai koordinat Nilai koordinat boleh menjadi unit panjang seperti px, em, rem atau peratusan.

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

Dalam kod di atas, kami mula-mula mentakrifkan kotak dengan lebar dan ketinggian 0, dan kemudian gunakan atribut laluan klip untuk menjepit kotak itu menjadi segi tiga. Dalam fungsi poligon(), kami mentakrifkan koordinat tiga titik, dan garisan yang menghubungkan tiga titik ini ialah tiga sisi segitiga. Koordinat bagi tiga titik ialah (50% 0%), (0% 100%) dan (100% 100%), yang mewakili bucu dan dua sudut bawah segitiga.

Memandangkan keserasian semasa atribut laluan klip tidak begitu baik, jika anda perlu menggunakan atribut ini dalam versi penyemak imbas yang lebih rendah, anda boleh menggunakan grafik SVG.

Tiga kaedah di atas boleh digunakan untuk merealisasikan bentuk segitiga Kaedah khusus untuk memilih perlu ditentukan mengikut keperluan sebenar. Dalam pembangunan sebenar, kita boleh menggabungkan pelbagai sifat dan kaedah untuk mencapai gaya segi tiga yang lebih kompleks.

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