Com triangle CSS: les formes més convenients

Molt sovint belles pàgines web moderns contenen molts gràfics atractius. Entre ells el més simple utilitza tal forma geomètrica com un triangle, que s'utilitza per dissenyar una pluralitat d'elements. Per exemple, s'utilitzen com un punter a un objecte en la pàgina perquè el visitant va tornar la seva atenció a ell. Per descomptat, la funció principal del triangle - 01:00 decoratiu, com blocs que els contenen, són cada vegada més modern i atractiu.

No tothom sap com crear una figura a través d'Cascading Style Sheets, i es pregunten com fer un triangle en el CSS.

Aplicació en el disseny de llocs

En triangles web de disseny de tot el món. Ells estan fets consells, menús, diversos elements d'interfície d'usuari. A vegades s'utilitzen per crear un indicador del procés d'arrencada. I si abans era possible prescindir-ne, però ara és impossible, i els desenvolupadors estan obligats a adaptar-se a aquests requisits. Després de tot, va crear avui en triangle CSS - una part important en la construcció de la interconnexió entre les parts de la interfície i es fonen en una sola entitat.

Molts dissenyadors web estan perplexos quan es tracta de la disposició, el disseny dels quals és molt sovint triangles. Després de tot, no hi ha propietats que crearia directament aquesta figura geomètrica. De fet, hi ha diversos mètodes per fer això.

Un mètode de creació de marc usant

El primer mètode permet crear un triangle en el CSS - frontera. Ell està utilitzant marcs. Malgrat el fet que els límits que es creen mitjançant la propietat frontera no està directament relacionada amb el triangle, que és la més utilitzada per a aquest propòsit.

En fixar l'altura zero i ample de l'objecte, així com la instal·lació d'una vora gruixut, es pot veure la plaça, que es divideix en quatre triangles iguals. El truc és que es necessita per mantenir només la vora necessari, i els altres per fer transparent. I ara, resulta que un triangle dibuixat en la direcció correcta CSS i color.

Crear angles utilitzant les propietats de "marc" és convenient perquè no hi ha necessitat de fer dibuixos que utilitzen cap tipus d'edició. paràmetres triangle sempre es poden canviar en el codi. I s'estalvia temps de desenvolupador. En combinar la diferent amplada del bastidor és suficient per aconseguir la figura fàcil. Per entendre com funciona, només ha de crear un element buit amb una amplada zero, l'alçada, i el marc molt gruixuda d'un color diferent a cada costat. Així, de manera que els tres costats dels quatre triangles transparents són de diferents tipus:

• triangle, mirant a l'esquerra, els costats són iguals;
• triangle, mira a l'esquerra i aplanat;
• un triangle allargat, davant de l'esquerra;
• triangle rectangle, els esquerra a angle recte;
• triangle que mira cap avall;
• triangle mirant cap amunt;
• triangle, mirant cap a la dreta, i moltes altres espècies.

usant psevdoedementov

Amb aquestes tècniques, pot crear angles en les instruccions de pop-up i consells. Per connectar a través de triangle CSS a la unitat, la majoria dels programadors utilitzar tal com un pseudo-després i abans. Si s'utilitzen junts, és possible dibuixar en el triangle CSS patir un vessament cerebral.

Mitjançant la combinació d'ells, els desenvolupadors crear una varietat de bella tirador, aplicant la propietat position: relative a l'element pare. Això es fa per tal de pseudo-no es va moure dels seus seients.

A més, l'ús de CSS marc per a la creació de triangles són:

• l'edició ràpida i fàcil de mides i colors, amb l'ajuda de les propietats;
• donar suport a tots els navegadors.

contres:

• ja que utilitza el marc, no hi ha possibilitat d'aplicar gradients, ombres;
• A vegades, quan l'usuari mira a la pàgina del navegador Firefox, el valor alfa pot no funcionar, i això va a distorsionar la imatge.

Ús d'imatges ja fetes

El següent mètode de crear triangles - és l'ús d'imatges codificades. El triangle es dibuixa amb antelació en un editor d'imatges i es converteix en un codi especial amb serveis especialitzats.

L'avantatge d'aquest mètode és que es pot fer un disseny molt bonic amb ombres, degradats, i el marc i després simplement codificar tot. Però el desavantatge és el fet que no tothom és fluid en els programes de gràfics. A més, si la imatge és molt gran, la línia de codi s'obté simplement enorme. Això és un inconvenient per al desenvolupador.

Un punt a part mereix l'ús de navegadors Internert Explorador de versions antigues. En ells, el mètode simplement no funciona.

Mètode quadrat invertit

Una manera és crear un mitjà de CSS invertida quadrat. Hi ha dues unitats bàsiques. No obstant això, algunes persones fan servir pseudo.

En primer lloc, es crea un quadrat. Serà el contingut de l'element giratori. A continuació, desplegar-lo en 45 graus, de manera que semblava com un diamant. A continuació, el desplaçament cap amunt i una unitat externa està oculta pel desbordament de la propietat: ocult. Aquesta solució tampoc és un cross-browser, i de vegades la imatge no es visualitza si ho desitja.

resultats

Per tant, hi ha molts mètodes per a crear un triangle. Només que no es perdi en totes aquestes propietats CSS? La referència en aquest cas sempre l'ajudarà. S'hi descriuen totes les característiques de Cascading Style Sheets.

Per aquells que no volen entrar en la programació i veure el CSS-guia, hi ha editors en línia que generen triangles mides i colors adequats. Al editor visual, l'usuari selecciona i configura tota la configuració de la figura. Convertit al triangle generador de codi CSS col·locat en una finestra separada sobre la marxa. A continuació, el codi generat s'insereix simplement en el full d'estil i per ajustar-se al disseny de la pàgina.