Bagaimana CSS segitiga: cara yang paling nyaman

Sangat sering halaman web modern yang indah mengandung banyak grafis yang menarik. Di antara mereka yang paling sederhana menggunakan bentuk geometris seperti segitiga, yang digunakan untuk merancang sejumlah elemen. Misalnya, mereka digunakan sebagai pointer ke objek pada halaman untuk pengunjung mengalihkan perhatian ke dia. Tentu saja, fungsi utama dari segitiga - dekoratif, sebagai blok yang mengandung mereka, menjadi lebih modern dan menarik.

Tidak semua orang tahu cara membuat sosok seperti melalui Cascading Style Sheets, dan bertanya-tanya bagaimana membuat segitiga di CSS.

Aplikasi dalam desain situs

Dalam segitiga web desain di mana-mana. Mereka terbuat tips, menu, berbagai elemen UI. Kadang-kadang mereka digunakan untuk membuat indikator dari proses boot. Dan jika sebelumnya hal itu mungkin untuk melakukannya tanpa mereka, tapi sekarang tidak mungkin, dan pengembang diwajibkan untuk beradaptasi dengan persyaratan tersebut. Setelah semua, hari ini dibuat dalam CSS segitiga - bagian penting dalam pembangunan interkoneksi antara bagian-bagian dari antarmuka dan bergabung menjadi satu kesatuan.

Banyak web desainer bingung ketika datang ke tata letak, desain yang sangat sering segitiga. Setelah semua, tidak ada sifat yang secara langsung akan menciptakan angka geometris ini. Bahkan, ada beberapa metode untuk melakukan hal ini.

Sebuah metode menciptakan bingkai menggunakan

Metode pertama memungkinkan Anda untuk membuat segitiga di CSS - perbatasan. Dia menggunakan frame. Terlepas dari kenyataan bahwa batas-batas yang dibuat menggunakan properti perbatasan tidak terkait langsung dengan segitiga, yang paling sering digunakan untuk tujuan ini.

Ketika pengaturan ketinggian nol dan lebar objek, serta instalasi perbatasan tebal, Anda dapat melihat persegi, yang terbagi menjadi empat segitiga sama. Kuncinya adalah bahwa Anda harus tetap hanya perbatasan diperlukan, dan lain-lain untuk membuat transparan. Dan sekarang, ternyata segitiga ditarik ke arah yang benar CSS dan warna.

Buat sudut menggunakan sifat "frame" nyaman karena tidak perlu menggambar menggunakan editing apapun. parameter segitiga selalu dapat diubah dalam kode. Dan menghemat pengembang waktu. Dengan menggabungkan lebar yang berbeda dari frame itu cukup mudah untuk mendapatkan gambar. Untuk memahami cara kerjanya, Anda hanya dapat membuat elemen kosong dengan lebar nol, tinggi, dan bingkai sangat tebal warna yang berbeda di setiap sisi. Jadi, membuat tiga sisi dari empat segitiga transparan adalah dari berbagai jenis:

• segitiga, mencari ke kiri, sisi yang sama;
• segitiga, melihat kiri dan diratakan;
• segitiga memanjang, menghadap kiri;
• segitiga siku, yang kiri ke sudut kanan;
• segitiga mencari ke bawah;
• segitiga mencari;
• segitiga, mencari ke kanan, dan banyak spesies lainnya.

menggunakan psevdoedementov

Dengan teknik ini, Anda dapat membuat sudut dalam petunjuk pop-up dan tips. Untuk melampirkan melalui CSS segitiga ke unit, sebagian besar programer menggunakan seperti pseudo-setelah dan sebelum. Jika Anda menggunakan mereka bersama-sama, adalah mungkin untuk menarik segitiga CSS mengalami stroke.

Dengan menggabungkan mereka, para pengembang menciptakan berbagai shooter indah, menerapkan properti position: relative untuk elemen induk. Hal ini dilakukan dalam rangka untuk pseudo-tidak pindah dari tempat duduk mereka.

Ditambah penggunaan framework CSS untuk membuat segitiga adalah:

• editing cepat dan mudah ukuran dan warna dengan bantuan sifat;
• mendukung semua browser.

kontra:

• karena menggunakan frame, tidak ada kemungkinan untuk menerapkan gradien, bayangan;
• kadang-kadang, ketika pengguna melihat halaman browser Firefox, nilai alpha mungkin tidak bekerja, dan ini akan mendistorsi gambar.

Menggunakan gambar siap pakai

Berikut metode menciptakan segitiga - adalah penggunaan gambar dikodekan. segitiga digambar terlebih dahulu dalam editor foto dan diubah menjadi kode khusus dengan layanan khusus.

Keuntungan dari metode ini adalah bahwa Anda dapat membuat desain yang sangat indah dengan bayangan, gradien, dan frame dan kemudian hanya menyalinnya semua. Tapi downside adalah kenyataan bahwa tidak semua orang fasih dalam program grafis. Selain itu, jika gambar yang sangat besar, baris kode diperoleh dengan hanya besar. Ini merepotkan bagi pengembang.

Sebuah bagian yang terpisah senilai penggunaan browser versi lama Internert Explorer. Di dalamnya, metode hanya tidak bekerja.

Metode terbalik persegi

Salah satu cara adalah untuk menciptakan sarana CSS terbalik persegi. Ada dua unit dasar. Tetapi beberapa orang menggunakan semu.

Pertama, Anda membuat persegi. Ini akan menjadi isi dari anggota berputar. Kemudian menyebarkan dengan 45 derajat, sehingga tampak seperti berlian. Berikutnya, pergeseran-up dan unit eksternal disembunyikan oleh meluapnya properti: tersembunyi. Solusi ini juga bukan lintas-browser, dan kadang-kadang gambar tidak ditampilkan seperti yang diinginkan.

hasil

Jadi, ada banyak metode untuk membuat segitiga. Hanya itu tidak tersesat dalam semua properti CSS ini? Referensi dalam hal ini akan selalu membantu. Ini menggambarkan semua fitur dari Cascading Style Sheets.

Bagi mereka yang tidak ingin pergi ke pemrograman dan melihat CSS-panduan, ada editor online yang menghasilkan segitiga ukuran yang tepat dan warna. Dalam editor visual, pengguna memilih dan mengkonfigurasi semua tokoh pengaturan. Dikonversi ke kode CSS Generator segitiga ditempatkan dalam jendela terpisah dengan cepat. Kemudian, kode yang dihasilkan hanya dimasukkan ke dalam stylesheet dan agar sesuai dengan desain halaman.