Kumaha do CSS segitiga: cara nu pangmerenahna

Sering pisan kaca web modern geulis ngandung loba grafik pikaresepeun. Di antarana pangbasajanna ngagunakeun wangun geometri kayaning a segitiga, nu geus dipaké pikeun ngararancang hiji pluralitas elemen. Contona, aranjeunna dipaké salaku pointer ka hiji obyék dina kaca ka nganjang ka ngancik perhatian pikeun anjeunna. Tangtu, fungsi utama segitiga éta - a hiasan, sakumaha blok nu ngandung aranjeunna, anu jadi leuwih modern tur pikaresepeun.

Teu sadaya jelema weruh kumaha carana nyieun inohong sapertos hiji liwat Cascading Style cadar, sarta anu wondering kumaha carana sangkan hiji segitiga di CSS.

Aplikasi dina desain situs

Dina triangles web design madhab. Éta dijieun kaluar tips, ménu, rupa elemen UI. Kadang-kadang maranehna anu dipaké pikeun nyieun hiji indikator tina prosés boot. Tur upami tadi ieu mungkin ngalakukeun tanpa aranjeunna, tapi kiwari ieu teu mungkin, jeung pamekar anu wajib adaptasi sasuai misalna. Barina ogé, kiwari dijieun di CSS segitiga - bagian penting dina pangwangunan interkonéksi antara bagian panganteur jeung ngagabung kana hiji éntitas tunggal.

Loba web désainer anu perplexed lamun datang ka tata perenah, desain nu pisan sering triangles. Barina ogé, euweuh sipat anu langsung bakal nyieun inohong geometric ieu. Kanyataanna, aya sababaraha metodeu pikeun ngalakukeun ieu.

A metoda nyieun pigura ngagunakeun

Metodeu munggaran ngidinan Anjeun pikeun nyieun hiji segitiga di CSS di - wates. Anjeunna ngagunakeun pigura. Najan kanyataan yén wates nu dijieun migunakeun harta wates henteu patali langsung ka segitiga éta, mangka paling mindeng dipaké pikeun tujuan ieu.

Nalika netepkeun jangkungna sarua jeung nol sarta rubak obyék, kitu ogé pamasangan wates kandel, anjeun tiasa ningali bujur, nu kabagi kana opat triangles sarua. trik ieu nu kudu tetep ukur wates diperlukeun, sarta batur sangkan transparan. Tur ayeuna, tétéla hiji segitiga digambar tujuan nu moal méncog CSS jeung warna.

Jieun sudut maké sipat "Pigura" nyaeta merenah sabab aya teu kudu ngagambar gambar maké ngedit nanaon. parameter segitiga bisa salawasna robah dina kode teh. Sarta eta ngaheéat pamekar waktos. Ku ngagabungkeun lebar béda pigura éta gampang cukup pikeun meunangkeun angka. Ngartos kumaha gawéna, anjeun bisa kalayan gampang bisa nyieun unsur kosong kalayan rubak enol, jangkungna, jeung pigura pisan kandel warna béda dina saban gigir. Ku kituna, sahingga tilu sisi opat triangles transparan téh tina tipena béda:

• segitiga, pilari ka kénca, sisi nu sarua;
• segitiga, pilari ditinggalkeun na flattened;
• hiji segitiga elongated, nyanghareupan ditinggalkeun;
• segitiga angled, anu kénca kana sudut katuhu;
• segitiga pilari handap;
• segitiga pilari up;
• segitiga, pilari ka katuhu, tur loba spésiés lianna.

ngagunakeun psevdoedementov

Kalawan téhnik ieu, anjeun bisa nyieun sudut dina parentah pop-up na tips. Pikeun ngagantelkeun via CSS segitiga ka unit, lolobana programer nganggo kayaning a pseudo-sanggeus sarta saméméh. Lamun make duanana babarengan, kasebut nyaéta dimungkinkeun pikeun narik dina segitiga CSS ngabogaan stroke a.

Ku ngagabungkeun aranjeunna, pamekar nyieun rupa-rupa jujur geulis, nerapkeun sipat posisi: relatif mun unsur indungna. Hal ieu dilakukeun dina raraga pseudo-henteu dipindahkeun kaluar tina korsi maranéhanana.

Tambah pamakéan kerangka CSS pikeun nyieun triangles téh:

• ngedit gancang jeung gampang tina ukuran jeung kelir kalayan bantuan pasipatan;
• ngarojong sagala panyungsi.

kontra:

• sabab migunakeun pigura, euweuh kamungkinan panawaran gradients, bayangan;
• kadang, nalika pamaké Sigana di halaman tina browser Firefox, nilai alpha teu dianggo, tur ieu bakal distort gambar.

Ngagunakeun gambar siap-dijieun

nuturkeun metoda nyieun triangles - nya éta ngagunakeun gambar dikodekeun. segitiga kasebut digambar sateuacanna dina editor gambar na dirobah jadi kode husus kalayan layanan husus.

Kauntungan tina metoda ieu nyaeta yen anjeun tiasa ngadamel desain geulis pisan ku bayangan, gradients, sarta pigura lajeng ngan encode eta sadayana. Tapi downside nyaeta kanyataan yén teu sadaya jelema anu béntés dina program grafik. Sajaba ti éta, lamun gambar anu kacida badag, garis kode ieu diala ku saukur gede pisan. Ieu pikaresepeun pikeun pamekar nu.

A item misah patut pamakéan panyungsi versi heubeul Internert Explorer. Di antarana, metoda nu saukur teu jalan.

Metoda inverted kuadrat

Hiji cara nya éta nyieun sarana CSS inverted alun. Aya dua Unit dasar. Tapi sababaraha urang make pseudo.

Kahiji, anjeun nyieun pasagi a. Ieu bakal eusi anggota puteran. Lajeng nyebarkeun eta ku 45 derajat, ku kituna nu katingali kawas inten a. Salajengna, anu shift-up na hiji Unit éksternal anu disumputkeun ku mudal sipat: disumputkeun. Leyuran ieu ogé henteu mangrupa cross-panyungsi, sarta sakapeung gambar henteu ditampilkeun sakumaha dipikahoyongna.

hasil

Ku kituna, aya loba metodeu pikeun nyieun segitiga. Ngan teu musna dina sakabéh pasipatan CSS ieu? Rujukan dina hal ieu bakal salawasna mantuan. Eta ngajelaskeun sagala fitur of Cascading Style cadar.

Pikeun jalma anu teu hayang balik kana programming tur ningali CSS-pituduh, aya rai online nu ngahasilkeun triangles ukuran katuhu jeung kelir. Dina editor visual, pamaké nu milih na configures kabeh inohong setélan. Dirobah jadi kode CSS generator segitiga ditempatkeun dina jandela misah on laleur nu. Lajeng, kodeu dihasilkeun ieu saukur diasupkeun kana stylesheet jeung pikeun nyocogkeun desain kaca.