Bagaimana CSS segitiga: cara-cara yang paling mudah

Selalunya indah laman web moden mengandungi banyak grafik yang menarik. Antaranya mudah menggunakan bentuk geometri seperti segi tiga, yang digunakan untuk mereka bentuk kejamakan unsur-unsur. Sebagai contoh, ia digunakan sebagai penunjuk kepada objek pada halaman untuk pengunjung mengalihkan perhatian kepadanya. Sudah tentu, fungsi utama segi tiga - hiasan, sebagai blok yang mengandungi mereka, menjadi lebih moden dan menarik.

Tidak semua orang tahu bagaimana untuk membuat apa-apa angka melalui Cascading Style Sheets, dan tertanya-tanya bagaimana untuk membuat segi tiga dalam CSS.

Permohonan dalam reka bentuk laman web

Dalam segi tiga reka bentuk web mana-mana. Mereka dibuat daripada tips, menu, pelbagai elemen UI. Kadang-kadang ia digunakan untuk mewujudkan petunjuk proses boot. Dan jika sebelum ini ia adalah mungkin untuk melakukan tanpa mereka, tetapi kini ia adalah mustahil, dan pemaju diwajibkan untuk menyesuaikan diri dengan kehendak itu. Lagipun, hari ini dicipta dalam CSS segi tiga - satu bahagian penting dalam pembinaan sambungan antara bahagian-bahagian antara muka dan bergabung menjadi satu entiti.

Ramai pereka web yang bingung ketika datang dengan susun atur, reka bentuk yang sangat sering segi tiga. Lagipun, tidak ada sifat-sifat yang secara langsung akan mewujudkan bentuk geometri ini. Malah, terdapat pelbagai kaedah untuk melakukan ini.

Satu kaedah mewujudkan rangka menggunakan

Kaedah pertama membolehkan anda untuk membuat sebuah segitiga dalam CSS - sempadan. Dia menggunakan bingkai. Walaupun fakta bahawa sempadan yang dicipta menggunakan harta sempadan itu tidak langsung berkaitan dengan segi tiga, ia paling kerap digunakan untuk tujuan ini.

Apabila menetapkan ketinggian sifar dan lebar objek, serta pemasangan sempadan tebal, anda boleh melihat dataran, yang dibahagikan kepada empat segi tiga sama. Silap mata tersebut bahawa anda perlu menyimpan hanya sempadan yang perlu, dan lain-lain untuk membuat telus. Dan kini, ternyata sebuah segitiga ditarik ke arah kanan CSS dan warna.

Buat sudut menggunakan sifat-sifat "bingkai" adalah mudah kerana tidak ada keperluan untuk melukis gambar dengan menggunakan apa-apa penyuntingan. parameter segitiga sentiasa boleh diubah dalam kod. Dan ia menjimatkan pemaju masa. Dengan menggabungkan lebar yang berbeza bingkai ia adalah mudah cukup untuk mendapatkan angka. Untuk memahami bagaimana ia berfungsi, anda hanya boleh membuat satu elemen kosong dengan lebar sifar, ketinggian, dan rangka sangat tebal warna yang berbeza pada setiap sisi. Jadi, membuat tiga sisi empat segi tiga telus adalah jenis yang berbeza:

• segitiga, mencari ke kiri, sisi yang sama;
• segi tiga, melihat ke kiri dan diratakan;
• segi tiga memanjang, menghadap kiri;
• segi tiga bersudut, yang kiri ke sudut kanan;
• segitiga mencari ke bawah;
• segitiga melihat ke atas;
• segi tiga, mencari untuk yang betul, dan banyak spesies lain.

menggunakan psevdoedementov

Dengan teknik ini, anda boleh membuat sudut dalam arahan pop-up dan tips. Untuk melampirkan melalui CSS segitiga kepada unit, kebanyakannya pengaturcara menggunakan apa-apa sebagai pseudo-selepas dan sebelum. Jika anda menggunakan mereka bersama-sama, ia adalah mungkin untuk menarik dalam segi tiga CSS yang mempunyai strok.

Dengan menggabungkan mereka, pemaju membuat pelbagai penembak indah, menggunakan harta kedudukan: relatif kepada elemen induk. Ini dilakukan untuk pseudo-tidak bergerak daripada tempat duduk mereka.

Plus penggunaan rangka kerja CSS untuk mewujudkan segi tiga ialah:

• editing mudah saiz dan warna dengan bantuan ciri-ciri;
• menyokong semua pelayar.

keburukan:

• kerana ia menggunakan bingkai, tidak ada kemungkinan untuk memohon kecerunan, bayang-bayang;
• kadang-kadang, apabila pengguna melihat laman pelayar Firefox, nilai alpha yang mungkin tidak berfungsi, dan ini akan memutarbelitkan imej.

Menggunakan gambar siap

Kaedah berikut mewujudkan segi tiga - adalah penggunaan imej yang dikodkan. segitiga ini disediakan terlebih dahulu dalam editor imej dan ditukar kepada kod khas dengan perkhidmatan khusus.

Kelebihan kaedah ini adalah bahawa anda boleh membuat reka bentuk yang sangat indah dengan bayang-bayang, kecerunan, dan bingkai dan kemudian hanya mengekod semua. Tetapi kekangan yang timbul ialah hakikat bahawa tidak semua orang fasih dalam program grafik. Di samping itu, jika imej adalah sangat besar, baris kod diperolehi dengan hanya besar. Ini adalah sukar untuk pemaju.

Satu perkara yang berasingan bernilai penggunaan pelayar Internert Explorer versi lama. Pada mereka, kaedah yang hanya tidak berfungsi.

Kaedah terbalik persegi

Salah satu cara ialah untuk mewujudkan satu cara untuk CSS terbalik persegi. Terdapat dua unit asas. Tetapi sesetengah orang menggunakan pseudo.

Pertama, anda membuat persegi. Ia akan menjadi kandungan ahli berputar. Kemudian menggunakan ia sebanyak 45 darjah, supaya ia kelihatan seperti berlian. Seterusnya, shift-up dan unit luaran yang disembunyikan oleh limpahan harta: tersembunyi. Penyelesaian ini juga bukan silang pelayar, dan kadang-kadang gambar tidak dipaparkan seperti yang dikehendaki.

keputusan

Jadi, ada banyak kaedah untuk membuat segi tiga. Hanya ia tidak tersesat dalam semua sifat-sifat CSS? Rujukan dalam kes ini akan sentiasa membantu. Ia menerangkan semua ciri Cascading Style Sheets.

Bagi mereka yang tidak mahu pergi ke dalam program dan melihat CSS-panduan, terdapat editor online yang menjana saiz betul dan warna segi tiga. Dalam editor visual, pengguna memilih dan mengkonfigurasi semua angka tetapan. Ditukar kepada segitiga kod CSS penjana diletakkan dalam tetingkap berasingan dengan cepat. Kemudian, kod yang dihasilkan adalah hanya dimasukkan ke dalam lembaran gaya dan untuk memenuhi reka bentuk halaman.