Hur CSS triangel: de enklaste sätten

Mycket ofta vackra moderna webbsidor innehåller många attraktiv grafik. Bland dem den enklaste använder sådan geometrisk form som en triangel, som används för att konstruera ett flertal element. Till exempel används de som en pekare till ett objekt på sidan för besökaren vänt sin uppmärksamhet till honom. Naturligtvis den viktigaste funktionen av triangeln - är ett dekorativt, eftersom block som innehåller dem, blir mer modern och attraktiv.

Inte alla vet hur man skapar en sådan siffra genom Cascading Style Sheets, och undrar hur man gör en triangel i CSS.

Tillämpning i utformningen av webbplatser

I webbdesign trianglar överallt. De är gjorda tips, menyer, olika gränssnittselement. Ibland används för att skapa en indikator på startprocessen. Och om tidigare var det möjligt att göra utan dem, men nu är det omöjligt, och utvecklarna är skyldiga att anpassa sig till sådana krav. När allt kommer omkring, skapade i dag i CSS triangel - en viktig del i byggandet av sammankopplingen mellan de delar av gränssnittet och smälter samman till en enda enhet.

Många webbdesigners är förbryllade när det gäller layout, vars konstruktion är ofta trianglar. När allt kommer omkring, inga egenskaper som skulle direkt skapa denna geometrisk figur. I själva verket finns det flera olika metoder för att göra detta.

En metod för att skapa ram med användning av

Den första metoden gör det möjligt att skapa en triangel i CSS - gränsen. Han använder ramar. Trots att de gränser som skapas med hjälp av gräns fastigheten inte är direkt relaterad till triangeln, det används oftast för detta ändamål.

Vid inställning av noll höjd och bredd av objektet, samt installation av en tjock ram, kan du se den fyrkantiga, som är uppdelad i fyra lika stora trianglar. Tricket är att du behöver för att hålla endast gränsen nödvändigt och de andra att göra genomskinlig. Och nu visar det sig en triangel dras i CSS rätt riktning och färg.

Skapa vinklar med hjälp av egenskaper "ram" är praktiskt eftersom det inte finns något behov av att rita bilder med någon redigering. triangel parametrar kan alltid ändras i koden. Och det sparar tid utvecklare. Genom att kombinera olika bredd på ramen är det lätt att komma figuren. För att förstå hur det fungerar, kan du enkelt skapa ett tomt element med en nolla bredd, höjd och mycket kraftig ram en annan färg på varje sida. Så gör de tre sidorna av de fyra transparenta trianglar är av olika slag:

• triangel, ser till vänster, vars sidor är lika;
• triangel, ser vänster och tillplattad;
• en långsträckt triangel, åt vänster;
• vinklad triangel, vars vänster till höger vinkel;
• triangel tittar nedåt;
• triangel ser upp;
• triangel, tittar åt höger, och många andra arter.

Använda psevdoedementov

Med dessa tekniker kan du skapa vinklar i pop-up instruktioner och tips. För att fästa via CSS triangeln till enheten, främst programmerare använder exempelvis en pseudo-efter och före. Om du använder dem tillsammans, är det möjligt att dra i CSS triangel har en stroke.

Genom att kombinera dem, utvecklare skapa en mängd vackra shooter, tillämpa egenskap Position: förhållande till det överordnade elementet. Detta görs för att pseudo-inte flyttat ut ur sina platser.

Plus användning av CSS ramverk för att skapa trianglar är:

• snabb och enkel redigering av storlekar och färger med hjälp av egenskaper;
• stödja alla webbläsare.

nackdelar:

• eftersom den använder ramen finns det ingen möjlighet att tillämpa gradienter, skuggor;
• ibland, när användaren tittar på sidan i webbläsaren Firefox, alfavärdet kanske inte fungerar, och detta kommer att förvränga bilden.

Med hjälp av färdiga bilder

Följande metod för att skapa trianglar - är användningen av kodade bilder. Triangeln dras i förväg i en bildredigerare och omvandlas till en speciell kod med specialiserade tjänster.

Fördelen med denna metod är att du kan göra en mycket vacker design med skuggor, övertoningar och ram och sedan bara koda allt. Men nackdelen är det faktum att inte alla är flytande i grafikprogram. Dessutom, om bilden är mycket stor, är raden av kod som erhålls genom att helt enkelt enorm. Detta är obekvämt för utvecklaren.

En separat post värd att använda webbläsare Internert Explorer gamla versioner. I dessa metoden helt enkelt inte fungerar.

Metod inverterat kvadrat

Ett sätt är att skapa ett medel för CSS inverterad kvadrat. Det finns två grundläggande enhet. Men vissa människor använder pseudo.

Först skapar du en kvadrat. Det kommer att bli innehållet i det roterande elementet. Sedan distribuera den med 45 grader, så att det såg ut som en diamant. Därefter Skift-up och en extern enhet döljs av fastigheten overflow: hidden. Denna lösning är inte heller en cross-browser, och ibland bilden inte visas som önskat.

resultat

Så det finns många metoder för att skapa en triangel. Endast det inte gå vilse i alla dessa CSS-egenskaper? Hänvisning i detta fall kommer alltid att hjälpa. Den beskriver alla funktioner i Cascading Style Sheets.

För dem som inte vill gå in programmering och visa CSS-guiden finns på nätet redaktörer som genererar trianglar rätt storlekar och färger. I visuella redigeraren, väljer användaren och konfigurerar alla inställningar siffra. Omräknat till CSS kodgenerator triangel placeras i ett separat fönster i farten. Sedan den genererade koden helt enkelt in i stylesheet och för att passa designen på sidan.