css untuk melaksanakan segi tiga

CSS ialah bahasa bahagian hadapan yang sangat berguna yang boleh digunakan untuk menambah pelbagai kesan menarik pada halaman web. Antaranya, segitiga ialah bentuk yang kerap muncul yang boleh digunakan untuk melengkapkan pelbagai reka bentuk, seperti anak panah, penunjuk, logo, dll. Artikel ini akan memperkenalkan cara menggunakan CSS untuk melaksanakan segi tiga.

1 Gunakan atribut sempadan

Menggunakan atribut sempadan ialah cara paling mudah untuk mencipta segi tiga. Kaedah ini hanya memerlukan penambahan sempadan pada elemen dan menetapkan sebahagian daripadanya kepada telus, dengan itu membentuk segi tiga. Berikut ialah contoh menggunakan atribut sempadan untuk mencipta segi tiga:

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

Dalam kod di atas, kami menetapkan elemen dengan lebar dan ketinggian 0, dan menjadikan sempadan atasnya merah, kanan dan kiri Bahagian tepi sempadan adalah telus. Ini menghasilkan segi tiga sama kaki dengan sudut kanan di sudut kiri bawah.

Apabila menggunakan atribut sempadan, kita boleh mencipta pelbagai bentuk segi tiga dengan menetapkan lebar dan warna atribut sempadan yang berbeza. Sebagai contoh, berikut ialah contoh mencipta segitiga sama sisi:

.triangle {
  width: 0;
  height: 0;
  border-width: 50px;
  border-style: solid;
  border-color: red transparent transparent transparent;
}

Dalam kod di atas, kami menetapkan elemen dengan lebar dan ketinggian 0, dan menjadikan 4 jidarnya 50 piksel lebar Jidar pepejal. Antaranya, sempadan atas berwarna merah, dan baki tiga sempadan adalah lutsinar. Ini akan mewujudkan segi tiga sama sisi.

Perlu diambil perhatian bahawa apabila menggunakan atribut sempadan untuk mencipta segi tiga, anda mesti memastikan bahawa lebar dan tinggi elemen adalah kedua-duanya 0, jika tidak, segi empat dan bukannya segi tiga akan dibuat.

2. Gunakan Pseudo-Elements

Satu lagi cara biasa untuk mencipta segitiga ialah menggunakan unsur pseudo. Kaedah ini adalah untuk menambah elemen pseudo di dalam elemen di mana segitiga akan dilaksanakan, dan menggunakan sifat transformasi CSS untuk memutarkannya 45 darjah. Berikut ialah contoh mencipta segitiga menggunakan unsur pseudo:

.triangle {
  position: relative;
  width: 100px;
  height: 100px;
}
.triangle:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  background-color: red;
  transform: rotate(45deg);
}

Dalam kod di atas, kami menetapkan elemen dengan lebar dan ketinggian 100 piksel dan menambah elemen pseudo padanya: sebelum. Kandungan unsur pseudo ini kosong Dengan menetapkan kedudukannya kepada mutlak, ia boleh diletakkan di dalam elemen.

Kami juga menetapkan lebar dan ketinggian elemen pseudo kepada 50 piksel dan menetapkan sifat warna latar belakangnya kepada merah. Pada masa yang sama, dengan menetapkan atribut transform:rotate(45deg) dan memutarkannya 45 darjah, anda boleh mencipta segi tiga sama kaki.

Tidak seperti menggunakan atribut sempadan, apabila menggunakan unsur pseudo untuk mencipta segi tiga, lebar dan tinggi elemen boleh ditetapkan secara bebas dan tidak perlu 0.

3. Gunakan atribut clip-path

clip-path ialah atribut baharu dalam CSS3 yang boleh digunakan untuk memotong bentuk elemen halaman. Dengan menetapkan parameter yang betul, kita boleh menggunakan sifat laluan klip untuk mencipta elemen pelbagai bentuk, termasuk segi tiga.

Berikut ialah contoh menggunakan atribut clip-path untuk mencipta segitiga:

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

Dalam kod di atas, kami menetapkan elemen dengan lebar dan ketinggian 100 piksel dan menetapkannya sebagai atribut background -color ditetapkan kepada merah. Pada masa yang sama, segi tiga tegak sama kaki boleh dibuat dengan menetapkan sifat laluan klip kepada poligon(0 0, 0 100%, 100% 50%).

Perlu diambil perhatian bahawa tahap sokongan atribut laluan klip adalah berbeza dalam penyemak imbas yang berbeza dan keserasian perlu diproses apabila menggunakannya.

Ringkasan

CSS menyediakan pelbagai cara untuk mencipta segi tiga, termasuk menggunakan atribut sempadan, unsur pseudo dan atribut laluan klip. Menggunakan atribut sempadan ialah cara paling mudah, tetapi anda perlu memastikan bahawa lebar dan ketinggian elemen adalah 0. Gunakan elemen pseudo untuk memberikan lebih fleksibiliti dalam menyesuaikan lebar dan ketinggian elemen. Menggunakan sifat laluan klip anda boleh mencipta bentuk segi tiga yang lebih eksotik. Apabila menggunakannya, anda perlu memilih kaedah yang betul mengikut keperluan sebenar dan melakukan pemprosesan yang serasi.

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