Kiel CSS triangulo: la plej konvena manieroj

Tre ofte belaj modernaj retpaĝoj enhavas multaj allogaj grafikaĵoj. Inter ili la plej simpla uzas tian geometrian formon kiel triangulo, kiu estas uzata por desegni pluralidad de elementoj. Ekzemple, ili estas uzataj kiel puntero al objekto sur la paĝo por la vizitanto turnis sian atenton al li. Kompreneble, la ĉefa funkcio de la triangulo - ornama, kiel blokoj kiuj enhavas ilin, estas ĉiufoje pli moderna kaj alloga.

Ne ĉiuj scias kiel krei tian figuron tra Laŭtemaj Folioj kaj demandas kiel fari triangulo en CSS.

Apliko en la dezajno de lokoj

En dezajno retejo trianguloj ĉie. Ili estas faritaj el konsiletoj, menuoj, diversaj UI elementoj. Kelkfoje ili estas uzataj por krei indikilo de la boto procezo. Se pli frue oni povis malhavi ilin, sed nun estas neeble, kaj la programistoj estas devigitaj adaptiĝi al tiaj postuloj. Ja hodiaŭ kreis en CSS triangulo - grava parto en la konstruo de interconexión inter la partoj de la interfaco kaj kunfandi en sola ento.

Multaj ttt diseñadores estas perpleksa kiam temas la aranĝo, la dezajno de kiu estas tre ofte triangulojn. Ja neniu ecoj kiuj rekte krei ĉi tiu geometria figuro. Fakte, ekzistas pluraj metodoj por fari tion.

Metodo de krei kadron uzante

La unua metodo permesas vin krei triangulo en la CSS - limo. Li uzas kadrojn. Malgraŭ tio, ke la limoj kiuj estas kreitaj uzante la limo proprieto ne estas rekte rilatigita kun la triangulo, ĝi estas uzata plej ofte por ĉi tiu celo.

Kiam opcio la nul alteco kaj larĝeco de la objekto, kaj ankaŭ la instalado de densa limo, vi povas vidi la kvadrata, kiu estas dividita en kvar egalaj trianguloj. La lertaĵo estas ke vi devas teni nur la necesan limon, kaj la aliaj por fari travidebla. Kaj nun, ĝi rezultas triangulo tirita en la CSS ĝustan direkton kaj koloro.

Krei anguloj uzante la proprietoj "kadro" estas oportuna ĉar estas neniu bezono tiri bildoj uzante ajna redaktado. triangulo parametroj povas ĉiam esti ŝanĝita en la kodo. Kaj ŝparas tempon ellaboranto. Kombinante la malsamaj larĝa de la kadro estas facile sufiĉa por akiri la figuro. Kompreni kiel ĝi funkcias, Vi povas simple krei malplenan elemento kun nulo larĝo, alteco, kaj tre dika kadro malsama koloro sur ĉiu flanko. Do, farante la tri flankoj de la kvar travidebla trianguloj estas de malsamaj tipoj:

• triangulo, rigardante maldekstren, la flankoj de kiuj estas egalaj;
• triangulo, aspektante forlasis kaj platigis;
• plilongigita triangulo, alfrontante forlasis;
• angled triangulo, kies maldekstre dekstren angulo;
• triangulo rigardante suben;
• triangulo suprenrigardante;
• triangulo, rigardante dekstren kaj multajn aliajn speciojn.

uzante psevdoedementov

Kun tiuj teknikoj, vi povas krei anguloj en la popo-supren instrukcioj kaj konsiloj. Ligi per CSS triangulo al la unuo, plejparte programistoj uzas kiel pseŭdo-post kaj antaŭ. Se vi uzas ilin, eblas desegni en la CSS triangulo havanta apopleksio.

Kombinante ilin, la programistoj krei diversajn belajn shooter, apliki proprieto pozicio: relativa al la patro elemento. Ĉi tiu estas farita por pseudo-ne moviĝis el sia sidlokoj.

Plus la uzo de CSS kadro por krei trianguloj estas:

• rapida kaj facila redaktado de grandecoj kaj koloroj kun la helpo de propraĵoj;
• subteni ĉiuj retumiloj.

trompoj:

• ĉar ĝi uzas la kadron, ne ekzistas ebleco apliki gradientoj, ombroj;
• foje, kiam la uzanto rigardas la paĝon de Firefox retumilo, la alfa valoro eble ne laboras, kaj tio distordas la bildon.

Uzante pretan bildoj

La jenaj metodo de kreado trianguloj - estas la uzo de kodita bildoj. La triangulo estas tirita anticipe en bildo redaktoro kaj konvertita en specialan kodon kun specialigitaj servoj.

Avantaĝo de ĉi tiu metodo estas ke vi povas fari tre bela dezajno kun ombroj, gradientoj kaj kadro kaj poste simple kodi ĉion. Sed la malavantaĝo estas la fakto ke ne ĉiuj estas flua en grafikaĵoj programoj. Krome, se la bildo estas tre granda, la linio de kodo estas ricevita per simple enorma. Tio estas maloportuna por la ellaboranto.

Alia elemento valoras la uzo de retumiloj Internert Explorer malnovaj versioj. En ili, la metodo simple ne funkcias.

Metodo renversita kvadrato

Unu maniero estas krei per CSS renversita kvadrato. Estas du bazaj unuo. Sed kelkaj homoj uzas pseŭdo.

Unue, vi kreas kvadratan. Estos la enhavon de la turnanta membro. Tiam disfaldi ĝin 45 gradoj, tiel ke ĝi aspektis kiel diamanto. Tuj poste, la movo-supren kaj ekstera unuo estas kaŝita de la proprieto troplenigxis: kaŝita. Tiu solvo ankaŭ ne estas transversa retumilo, kaj foje la bildo ne estas montrata kiel dezirite.

rezultoj

Do, estas multaj metodoj por krei triangulo. Nur ne perdiĝu en ĉiuj ĉi tiuj CSS propraĵoj? Referenco en tiu kazo ĉiam helpas. Ĝi priskribas ĉiuj trajtoj de Laŭtemaj Style Sheets.

Por tiuj kiuj ne volas iri en la programado kaj vidi la CSS-gvidanto, estas rete redaktoroj kiuj generas trianguloj dekstra grandecoj kaj koloroj. En la vida redaktoro, la uzanto selektas kaj formas ĉiuj agordojn figuro. Konvertiĝis al la CSS kodo generatoro triangulo metita en aparta fenestro al la flugo. Tiam, la generita kodo estas simple enmetataj en la stilfolio kaj ĝustigi la dezajno de la paĝo.