Ako vytvoriť trojuholník v CSS: najvhodnejšie spôsoby

Veľmi často moderné krásne webové stránky obsahujú veľa atraktívnych grafických prvkov. Medzi nimi najjednoduchšia geometrická postava sa používa ako trojuholník, ktorý sa používa na návrh množiny prvkov. Napríklad ich používam ako ukazovateľ na určitý objekt na stránke, aby sa návštevník stránky obrátil jeho pozornosť na neho. Samozrejme, hlavná funkcia trojuholníka je dekoratívna, pretože bloky, ktoré ich obsahujú, sa stávajú modernejšími a atraktívnejšími.

Nie každý vie, ako vytvoriť takéto tvary pomocou kaskádových štýlov, a zaujímalo sa, ako vytvoriť trojuholník v CSS.

Aplikácia pri návrhu lokalít

Vo webovom návrhu sú všade nájdené trojuholníky. Tvoria tipy, menu, všetky druhy prvkov používateľského rozhrania. Niekedy sa používajú pri vytváraní indikátora zavádzacieho procesu. A keby bolo možné urobiť bez nich skôr, teraz to nie je možné, a vývojári sú povinní prispôsobiť sa takýmto požiadavkám. Koniec koncov, trojuholník vytvorený v CSS je najdôležitejšou súčasťou budovania vzájomného prepojenia medzi časťami rozhrania a zjednotením do jedného celku.

Mnohí umelci rozloženia sú zmätení, keď získajú rozloženie, ktorého dizajn je často trojuholníkom. Koniec koncov, neexistujú žiadne vlastnosti, ktoré priamo vytvoria tento geometrický obrázok. V skutočnosti je k dispozícii niekoľko spôsobov.

Ako vytvoriť pomocou rámčeka

Prvá metóda, ktorá umožňuje vytvoriť trojuholník v CSS, je ohraničená. Je to použitie rámca. Napriek skutočnosti, že hranice vytvorené pomocou hraničnej vlastnosti nie sú priamo spojené s trojuholníkom, používajú sa na tento účel najčastejšie.

Keď zadáte nulovú výšku a šírku objektu, rovnako ako nastavenie hrubého okraja, môžete vidieť štvorec, ktorý sa skladá zo štyroch rovnakých trojuholníkov. Trikom je, že musíte nechať len potrebné hranice a zvyšok, aby ste boli transparentní. A tak sa ukáže trojuholník nakreslený v CSS správnym smerom a farbou.

Vytváranie uhlov pomocou vlastností "border" je výhodné, pretože nie je potrebné kresliť obrázok pomocou grafického editora. Parametre trojuholníka je možné vždy zmeniť v kóde. A šetrí čas pre vývojárov. Kombinácia rôznych šírok rámu je dostatočne jednoduchá na získanie tvaru. Aby ste pochopili, ako to funguje, môžete jednoducho vytvoriť prázdny prvok so šírkou nuly, výšky a veľmi hrubým rámom rôznych farieb na každej strane. Tak, aby tri strany štyroch priehľadných, získať trojuholníky rôznych druhov:

• Trojuholník, pohľad doľava, ktorého strany sú rovnaké;
• Trojuholník, ktorý vyzerá vľavo a je sploštený;
• Predĺžený trojuholník, pohľad doľava;
• Pravý trojuholník s pravým uhlom vľavo;
• Trojuholník pozrel dolu;
• Trojuholník vzhliadol;
• Trojuholník sa pozerá doprava a mnoho ďalších odrôd.

Použitie pseudo-dementorov

Pomocou týchto techník môžete vytvoriť rohy v pop-up tipy a tipy. Na pripojenie trojuholníka k bloku pomocou CSS, väčšina programátorov používa takéto pseudo-prvky ako po a pred. Ak ich použijete spoločne, môžete nakresliť trojuholník v CSS, ktorý má mŕtvicu.

Pomocou ich kombinácie vytvárajú vývojári veľa krásnych šípok tým, že uplatňujú pozíciu: relatívna vlastnosť na rodičovský prvok. To sa robí tak, aby sa pseudo-prvky nevyťahovali z ich miest.

Výhody používania rámca CSS pri vytváraní trojuholníkov sú:

• Rýchla a jednoduchá editácia veľkosti a farby pomocou vlastností.
• Podporujte všetky prehliadače.

nevýhody:

• Pretože sa používajú rámčeky, nie je možné použiť gradienty, tiene;
• Niekedy, keď sa používateľ pozerá na stránky v prehliadači Firefox, transparentnosť nemusí fungovať, čo spôsobí skreslenie obrázka.

Použitie dokončeného obrázka

Ďalšou metódou vytvárania trojuholníkov je použitie kódovaného obrázka. Trojuholník je vopred nakreslený v grafickom editore a konvertovaný na špeciálny kód pomocou špecializovaných služieb.

Plus z tejto metódy je, že môžete urobiť veľmi krásny dizajn s tieňmi, prechody a rámy a potom len kód všetko. A nevýhody spočívajú v tom, že nie všetci dobre vedia grafické programy. Okrem toho, ak je obraz veľmi veľký, potom je riadok kódu jednoducho obrovský. To je pre vývojára nepríjemné.

Samostatným bodom je použitie starších verzií prehliadačov Internert Explorer. V nich táto metóda jednoducho nebude fungovať.

Invertovaná štvorcová metóda

Jedným zo spôsobov je vytvorenie CSS obráteného štvorca. Tu sú dva bloky. Niektorí ľudia však používajú pseudoelementy.

Najskôr sa vytvorí štvorec. Bude to obsah otočeného prvku. Potom sa otáča o 45 stupňov, aby to vyzeralo ako diamant. Potom sa posunie nahor a vonkajší blok sa skryje pomocou funkcie pretečenie: skrytá. Toto riešenie tiež nie je krížový prehliadač a niekedy sa obrázok nezobrazí podľa potreby.

výsledok

Takže existuje mnoho spôsobov na vytvorenie trojuholníka. Ale ako sa nestratiť vo všetkých týchto vlastnostiach CSS? Adresár v tomto prípade vždy pomôže. Popisuje všetky vlastnosti kaskádových štýlov.

Pre tých, ktorí nechcú ísť do programovania a prezerať adresár CSS, existujú online editory, ktoré vytvárajú trojuholníky správnej veľkosti a farieb. Vo vizuálnom editore užívateľ vyberie a upraví všetky tvarové parametre. Prevedený na generátor trojuholníka kódu CSS vloží do samostatného okna priamo na lište. Potom vygenerovaný kód sa jednoducho vloží do štýlu a prispôsobí sa dizajnu stránky.