Paano CSS tatsulok: ang pinaka-maginhawang paraan

Kadalasan maganda modernong mga pahina ng web na naglalaman ng maraming mga kaakit-akit graphics. Kabilang sa mga ito ang pinakasimpleng ay gumagamit ng tulad geometric na hugis tulad ng isang tatsulok, na kung saan ay ginagamit upang mag-disenyo ng mayorya ng mga elemento. Halimbawa, ang mga ito ay ginagamit bilang isang pointer sa isang bagay sa pahina sa bisita nakabukas ang kanyang pansin sa kanya. Siyempre pa, ang pangunahing pag-andar ng ang tatsulok - isang mapalamuting, tulad ng mga bloke na naglalaman ng mga ito, ay nagiging mas moderno at kaakit-akit.

Hindi alam ng lahat kung paano lumikha ng tulad ng isang figure sa pamamagitan ng Cascading Style Sheets, at ay nagtataka kung paano gumawa ng isang tatsulok sa CSS.

Application sa ang disenyo ng site

Sa web triangles na disenyo sa lahat ng dako. Ang mga ito ay gawa sa mga tip, mga menu, iba't-ibang UI elemento. Kung minsan ang mga ito ay ginagamit upang lumikha ng isang tagapagpahiwatig ng proseso ng boot. At kung mas maaga ito ay posible na gawin nang walang mga ito, ngunit ngayon ito ay imposible, at ang mga developer ay nagpapasalamat upang umangkop sa naturang mga kinakailangan. Matapos ang lahat, ngayon na nilikha sa CSS tatsulok - isang mahalagang bahagi sa ang konstruksiyon ng pagkakabit sa pagitan ng mga bahagi ng interface at sumanib sa isang solong entity.

Maraming mga web designers ay naguguluhan pagdating sa ang layout, ang disenyo ng kung saan ay napakadalas triangles. Matapos ang lahat, walang mga ari-arian na direktang lumikha ng geometric figure. Sa katunayan, may mga maramihang mga paraan upang gawin ito.

Isang paraan ng paglikha ng frame gamit

Ang unang paraan ay nagbibigay-daan sa iyo upang lumikha ng isang tatsulok sa CSS - hangganan. Siya ay gumagamit ng frames. Sa kabila ng ang katunayan na ang mga hangganan na nilikha gamit ang border ng ari-arian ay hindi direktang may kaugnayan sa ang tatsulok, ito ay ginagamit pinaka-madalas para sa layuning ito.

Kapag nagse-set ang zero taas at lapad ng mga bagay, pati na rin ang pag-install ng isang makapal na hangganan, maaari mong makita ang parisukat, na kung saan ay nahahati sa apat na pantay na triangles. Nanlilinlang ay na kailangan mo upang panatilihin lamang kinakailangang mga hangganan, at ang iba pa upang gawing transparent. At ngayon, ito ay lumiliko out isang tatsulok inilabas sa CSS tamang direksyon at kulay.

Lumikha ng mga anggulo gamit ang properties "frame" ay maginhawa dahil hindi na kailangan upang gumuhit ng mga larawan gamit ang anumang pag-edit. tatsulok parameter ay maaaring palaging mabago sa code. At ito ay nakakatipid ng oras nag-develop. Sa pamamagitan ng pagsasama-sama ng iba't ibang lapad ng frame na ito ay madaling sapat na upang makuha ang figure. Upang maunawaan kung paano ito gumagana, maaari kang lumikha lamang ng isang walang laman na elemento na may isang zero lapad, taas, at napaka-makapal na frame ng ibang kulay sa bawat panig. Kaya, ang paggawa ng mga tatlong panig ng apat na transparent triangles ay ng iba't-ibang uri:

• tatsulok, naghahanap sa kaliwa, ang mga gilid ng kung saan ay pantay-pantay;
• tatsulok, naghahanap ng pakaliwa at pipi;
• isang pinahabang tatsulok, nakaharap sa kaliwa;
• angled tatsulok, kung saan ang kaliwa papuntang kanan anggulo;
• tatsulok naghahanap pababa;
• tatsulok naghahanap up;
• tatsulok, naghahanap sa kanan, at marami pang ibang species.

Paggamit psevdoedementov

Sa pamamagitan ng mga diskarte, maaari kang lumikha ng mga anggulo sa pop-up na mga tagubilin at mga tip. Upang i-attach sa pamamagitan ng CSS tatsulok upang ang yunit, halos programmer gamitin tulad ng isang pseudo-matapos at bago. Kung gumagamit ka ng mga ito nang sama-sama, ito ay posible upang gumuhit sa CSS tatsulok pagkakaroon ng isang stroke.

Sa pamamagitan ng pagsasama-sama ng mga ito, ang mga developer lumikha ng isang iba't ibang mga magagandang tagabaril, paglalapat ng property posisyon: kamag-anak sa magulang elemento. Ginagawa ito upang hindi tunay-na hindi inilipat sa labas ng kanilang mga upuan.

Plus ang paggamit ng CSS framework para sa paglikha ng triangles ay ang mga:

• mabilis at madaling pag-edit ng mga laki at kulay sa tulong ng mga ari-arian;
• suportahan ang lahat ng mga browser.

cons:

• dahil ito ay gumagamit ng mga frame, walang posibilidad na mag-aplay gradients, anino;
• kung minsan, kapag ang user ay tumitingin sa pahina ng Firefox browser, ang alpha halaga ay maaaring hindi gumana, at ito ay papangitin ang imahe.

Paggamit ng handa-made na mga larawan

Ang mga sumusunod na paraan ng paglikha ng triangles - ay ang paggamit ng mga naka-encode na mga imahe. Ang tatsulok ay iguguhit nang maaga sa isang editor ng imahe at convert sa isang espesyal na code na may espesyal na mga serbisyo.

Advantage ng ang paraan ay na maaari mong gumawa ng isang napaka magandang disenyo na may mga anino, gradients, at frame at pagkatapos lamang i-encode ang lahat ng ito. Ngunit ang downside ay ang katotohanan na hindi lahat ng tao ay matatas sa graphics programa. Sa karagdagan, kung ang imahe ay masyadong malaki, ang mga linya ng code ay nakuha sa pamamagitan ng simpleng napakalubha. Ito ay maginhawa para sa mga developer.

Ang isang hiwalay na item nagkakahalaga ng paggamit ng mga browser Internert Explorer lumang bersyon. Sa mga ito, ang paraan lamang ay hindi gumagana.

Pamamaraan inverted square

Ang isang paraan ay upang lumikha ng isang paraan ng CSS inverted square. Mayroong dalawang mga pangunahing unit. Ngunit ang ilang mga tao ang gumagamit ng pseudo.

Una, lumikha ka ng isang parisukat. Ito ay magiging ang mga nilalaman ng umiikot na kasapi. Pagkatapos ay i-deploy ito sa pamamagitan ng 45 degrees, upang ito ay tumingin tulad ng isang diyamante. Sunod, ang shift-up at isang panlabas na yunit ay nakatago sa pamamagitan ng mga ari-arian overflow: nakatago. solusyon na ito rin ay hindi isang cross-browser, at kung minsan ang larawan ay hindi ipinapakita bilang ninanais.

mga resulta

Kaya, mayroong maraming mga paraan upang lumikha ng isang tatsulok. Lamang ito ay hindi mawala sa lahat ng mga katangian ng CSS? Reference sa kasong ito ay palaging makatulong. Inilalarawan nito ang lahat ng mga tampok ng Cascading Style Sheets.

Para sa mga taong hindi nais na pumunta sa programming at tingnan ang CSS-gabay, may mga online na editor na bumuo ng triangles tamang laki at kulay. Sa visual editor, ang user ay pinipili at Kino-configure ang lahat ng mga setting ng figure. Convert sa CSS code generator tatsulok inilagay sa isang hiwalay na window sa fly. Pagkatapos, ang mga nabuong code ay nagre ipinasok sa stylesheet at upang magkasya ang disenyo ng pahina.