Hvordan CSS trekant: de mest praktiske måter

Svært ofte vakre moderne nettsider inneholder mange attraktive grafikk. Blant dem den enkleste benytter en slik geometrisk form som en trekant, som brukes til å utforme et flertall av elementer. For eksempel, de brukes som en peker til et objekt på siden til den besøkende vendte sin oppmerksomhet mot ham. Selvfølgelig er den viktigste funksjonen til trekant - er en dekorativ, som blokker som inneholder dem, blir mer moderne og attraktiv.

Ikke alle vet hvordan du oppretter en slik figur gjennom Cascading Style Sheets, og lurer på hvordan å lage en trekant i CSS.

Søknad i utformingen av nettsteder

I webdesign trekanter overalt. De er laget ut tips, menyer, forskjellige UI elementer. Noen ganger kan de brukes til å lage en indikator av støvelen prosessen. Og hvis tidligere var det mulig å gjøre uten dem, men nå er det umulig, og utviklerne har plikt til å tilpasse seg slike krav. Tross alt, i dag laget i CSS trekant - en viktig del i byggingen av samtrafikk mellom deler av grensesnittet og flette inn i en enkelt enhet.

Mange webdesignere er forvirret når det gjelder layout, design som er svært ofte trekanter. Tross alt, ingen egenskaper som vil direkte opprette dette geometrisk figur. Faktisk, det er flere måter å gjøre dette.

En metode for å skape rammen ved hjelp

Den første metoden gjør det mulig å lage en trekant i CSS - grensen. Han bruker rammer. Til tross for at de grensene som er opprettet ved hjelp grensen eiendommen ikke er direkte relatert til trekanten, er det brukt oftest til dette formålet.

Ved innstilling av null høyde og bredde av objektet, samt installasjon av en tykk kant, kan man se plassen, som er delt inn i fire like trekanter. Trikset er at du trenger å holde bare den nødvendige grensen, og de andre for å gjøre gjennomsiktig. Og nå viser det seg en trekant trukket i CSS riktig retning og farge.

Lag vinkler ved hjelp av egenskaper "ramme" er praktisk fordi det ikke er behov for å tegne bilder ved hjelp av noen redigering. trekant parametere kan alltid endres i koden. Og det sparer tid utvikler. Ved å kombinere de forskjellige bredden av rammen er det lett nok til å få figuren. For å forstå hvordan det fungerer, kan du ganske enkelt opprette et tomt element med null bredde, høyde og veldig tykk ramme en annen farge på hver side. Så gjør de tre sidene av de fire gjennomsiktige trekanter er av forskjellige typer:

• trekant, ser til venstre, sidene som er like;
• trekant, se venstre og flatet;
• en langstrakt trekant, mot venstre;
• vinklet trekant, hvis venstre til høyre vinkel;
• trekant ser nedover;
• trekant ser opp;
• trekant, ser til høyre, og mange andre arter.

Bruke psevdoedementov

Med disse teknikkene kan du lage vinkler i pop-up instruksjoner og tips. For å feste via CSS trekant til enheten, for det meste programmerere bruke som en pseudo-etter og før. Hvis du bruker dem sammen, er det mulig å tegne i CSS-trekant med et slag.

Ved å kombinere dem, utviklerne lage en rekke vakre skytespill, bruke eiendom position: relative til den overordnede element. Dette gjøres for å pseudo ikke flyttet ut av setene.

Pluss bruk av CSS rammeverk for å lage trekanter er:

• rask og enkel redigering av størrelser og farger ved hjelp av egenskaper;
• støtter alle nettlesere.

ulemper:

• fordi den bruker rammen, er det ingen mulighet til å søke graderinger, skygger;
• noen ganger, når brukeren ser på siden av nettleseren Firefox, alfa verdi kan ikke fungere, og dette vil forvrenge bildet.

Ved hjelp av ferdige bilder

Den følgende fremgangsmåte for å danne trekanter - er bruken av kodede bilder. Trekanten er trukket på forhånd i et bilderedigeringsprogram og omgjort til en spesiell kode med spesialiserte tjenester.

Fordelen med denne metoden er at du kan gjøre en veldig vakker design med skygger, graderinger, og ramme, og så bare kode det hele tatt. Men ulempen er at ikke alle er flytende i grafiske programmer. I tillegg, hvis bildet er meget stor, er den kodelinje oppnådd ved ganske enkelt enorm. Dette er upraktisk for utbygger.

Et eget element verdt bruk av nettlesere Internert Explorer gamle versjoner. I dem, metoden rett og slett ikke fungerer.

Metode omvendt kvadratisk

En måte er å skape et middel for CSS invertert torget. Det er to grunnleggende enhet. Men noen mennesker bruker pseudo.

Først oppretter du en firkant. Det vil være innholdet av den roterende del. Deretter distribuere den ved 45 grader, slik at det så ut som en diamant. Deretter skiftet opp og en ekstern enhet skjult av eiendommen overflow: skjult. Denne løsningen er heller ikke en cross-browser, og noen ganger bildet ikke vises som ønsket.

resultater

Så, det er mange metoder for å lage en trekant. Bare det ikke gå seg vill i alle disse CSS egenskaper? Referanse i dette tilfellet vil alltid hjelpe. Den beskriver alle funksjonene i Cascading Style Sheets.

For de som ikke ønsker å gå inn i programmering og vise CSS-guide, det er online redaktører som genererer trekanter riktige størrelser og farger. I visuell editor, velger brukeren og konfigurerer alle innstillinger figur. Omregnet til CSS-kode generator trekant plassert i et eget vindu på fly. Deretter blir den genererte koden ganske enkelt inn i stil og å passe utformingen av siden.