Hoe CSS driehoek: de meest handige manieren

Heel vaak prachtige moderne webpagina's bevatten veel aantrekkelijke graphics. Waaronder de meest eenvoudige toepassingen zoals geometrische vorm als een driehoek, welke wordt gebruikt om meerdere elementen te ontwerpen. Zo worden ze gebruikt als een pointer naar een object op de pagina om de bezoeker richtte zijn aandacht op hem. Natuurlijk, de belangrijkste functie van de driehoek - een decoratief, als blokken die ze bevatten, worden steeds modern en aantrekkelijk.

Niet iedereen weet hoe je zo'n figuur creëren door middel van Cascading Style Sheets, en vragen zich af hoe je een driehoek in CSS te maken.

Toepassing in het ontwerp van de sites

In web design driehoeken overal. Ze zijn gemaakt uit tips, menu's, verschillende UI-elementen. Soms worden ze gebruikt om een indicator van het opstartproces te creëren. En indien dat eerder was het mogelijk om te doen zonder hen, maar nu is het onmogelijk, en de ontwikkelaars zijn verplicht zich aan te passen aan deze eisen. Immers, vandaag de dag die in CSS driehoek - een belangrijke rol in de bouw van de interconnectie tussen de delen van de interface en samen te voegen tot één geheel.

Veel webdesigners zijn perplex als het gaat om de lay-out, waarvan het ontwerp is heel vaak driehoeken. Immers, geen eigenschappen die zou direct leiden tot deze geometrische figuur. In feite zijn er meerdere methoden om dit te doen.

Een werkwijze voor het creëren frame met behulp

De eerste methode kunt u een driehoek in de CSS - grens. Hij maakt gebruik van frames. Ondanks het feit dat de grenzen die zijn gemaakt met de eigenschap border is niet direct gerelateerd aan de driehoek, wordt meestal gebruikt voor dit doel.

Bij het instellen van de hoogte en breedte van het object nul, en de installatie van een dikke rand, kan het vierkant, dat is onderverdeeld in vier gelijke driehoeken zien. De truc is dat je nodig hebt om alleen de noodzakelijke grens te houden, en de anderen om transparanter te maken. En nu, zo blijkt uit een driehoek getekend in de CSS juiste richting en kleur.

Maak hoeken met behulp van de eigenschappen "frame" is handig omdat er geen noodzaak om foto's met behulp van een bewerking te tekenen. driehoek parameters kunnen steeds worden gewijzigd in de code. En het bespaart tijd ontwikkelaar. Door het combineren van de verschillende breedte van het frame is het makkelijk genoeg om de figuur te krijgen. Om te begrijpen hoe het werkt, kunt u eenvoudig zorgen voor een leeg element met een nul breedte, hoogte, en zeer dik montuur een andere kleur aan elke kant. Dus, waardoor de drie zijden van de vier transparante driehoeken zijn van verschillende types:

• driehoek, naar links, waarvan de zijden gelijk zijn;
• driehoek, op zoek naar links en platgelegd;
• een langwerpige driehoek, naar links;
• rechthoekige driehoek, waarvan de links naar rechte hoek;
• driehoek op zoek naar beneden;
• driehoek opzoeken;
• driehoek, op zoek naar rechts, en vele andere soorten.

Met behulp van psevdoedementov

Met deze technieken, kunt u hoeken in het pop-up instructies en tips te creëren. Bevestigen via CSS driehoekje apparaat, voornamelijk programmeurs zoals een pseudo-na en voor. Als je ze samen gebruikt, is het mogelijk om te tekenen in de CSS-driehoek met een beroerte.

Door ze te combineren, de ontwikkelaars een verscheidenheid aan prachtige shooter, het toepassen van onroerend goed position: relative aan de ouder element. Dit wordt gedaan met het oog op pseudo-niet uit hun stoel verplaatst.

Plus het gebruik van CSS framework voor het creëren van driehoeken zijn:

• snelle en eenvoudige bewerking van maten en kleuren met behulp van eigenschappen;
• ondersteunen alle browsers.

nadelen:

• omdat het gebruik maakt van het frame, is er geen mogelijkheid om te verlopen, schaduwen toe te passen;
• Soms, wanneer de gebruiker kijkt naar de pagina van Firefox-browser, de alfa-waarde kan niet werken, en dit zal de afbeelding te vervormen.

Het gebruik van kant en klare foto's

De volgende methode voor het maken driehoeken - het gebruik van gecodeerde beelden. De driehoek is getekend bij voorbaat in een foto-editor en omgezet in een speciale code met gespecialiseerde diensten.

Voordeel van deze methode is dat je een heel mooi ontwerp kan maken met schaduwen, gradiënten, en het frame en dan gewoon te coderen het allemaal. Maar het nadeel is het feit dat niet iedereen spreekt vloeiend grafische programma's. Bovendien, als de afbeelding erg groot, de regel code wordt verkregen door eenvoudigweg enorm. Dit is lastig voor de ontwikkelaar.

Een apart punt waard het gebruik van browsers Internert Explorer oude versies. In hen, de methode werkt gewoon niet.

Werkwijze omgekeerd vierkant

Een manier is om een middel van CSS omgekeerd vierkant te maken. Er zijn twee fundamentele eenheid. Maar sommige mensen maken gebruik van pseudo.

Ten eerste, een vierkant maakt u. Het zal de inhoud van het roterende orgaan. implementeert het dan met 45 graden, zodat het leek als een diamant. Vervolgens wordt de shift-up en een externe eenheid verborgen door de eigenschap overflow: hidden. Deze oplossing is ook niet een cross-browser, en soms ook de foto is niet naar wens wordt weergegeven.

uitslagen

Dus, er zijn vele manieren om een driehoek te maken. Alleen is het niet verloren gaat in al deze CSS-eigenschappen? De verwijzing in dit geval zal altijd helpen. Het beschrijft alle functies van Cascading Style Sheets.

Voor degenen die niet willen in de programmering te gaan en bekijk de CSS-gids, zijn er online editors die driehoeken juiste maten en kleuren te genereren. In de visuele editor, selecteert de gebruiker en configureert alle cijfer instellingen. Omgerekend naar de CSS-code generator driehoek geplaatst in een apart venster op de vlieg. Vervolgens wordt de gegenereerde code eenvoudig in de stylesheet en het ontwerp van de pagina te passen.