Generátor CSS trojuholníkov

Vyberte smer, veľkosť a farbu a vytvorte trojuholník z čistého CSS, potom skopírujte kód. Používa sa klasická technika s div prvkom s nulovou šírkou/výškou a priehľadnými okrajmi — žiadne obrázky, žiadne SVG, žiadny clip-path — len pár deklarácií okrajov, ktorým rozumie každý prehliadač.

Čo je tento nástroj?

CSS nemá vlastný tvar trojuholníka, preto sa trojuholníky vytvárajú dobre známym riešením: vezmite prvok s nulovou šírkou a výškou, dajte mu plný okraj na jednej strane a priehľadné okraje na dvoch susedných stranách. Keďže susedné okraje sa stretávajú pod uhlom 45 stupňov, priehľadné okraje sa zužujú do bodu a viditeľný zostáva len farebný okraj v tvare trojuholníka.

Tento nástroj vám túto štruktúru vytvorí sám: vyberte, ktorým smerom má trojuholník smerovať, akú má mať veľkosť a akú farbu, potom sledujte aktualizáciu živého náhľadu a skopírujte presný CSS kód. Rovnaký trik sa používa naprieč webom pre šípky vytvorené len z CSS, ukazovatele tooltipov a šípky rozbaľovacích menu.

Zdroj: CSS Backgrounds and Borders Module Level 3, W3C — definuje, ako sa susedné hrany okrajov stretávajú pod uhlom, čo je mechanizmus, na ktorom táto technika trojuholníka stojí.

Prečo ho používať?

Živý náhľad zobrazuje skutočný trojuholník, takže si pred kopírovaním môžete overiť veľkosť, smer aj farbu.
Pokrýva všetky štyri základné smery — hore, dole, doľava, doprava — v jednom ovládacom prvku.
Nie sú potrebné žiadne obrázky ani SVG — trojuholník vytvorený týmto spôsobom je len pár riadkov CSS.
Užitočné pre ukazovatele tooltipov, šípky rozbaľovacích menu/akordeónov, vlastné odrážky zoznamov a jednoduché dekoratívne tvary.
Beží úplne vo vašom prehliadači — nič z toho, čo nastavíte, sa nikam neodosiela.
Zdarma, bez registrácie, funguje na mobile.

Ako sa používa

Vyberte smer — trojuholník smeruje hore, dole, doľava alebo doprava podľa toho, ktorá strana má plný okraj.
Nastavte veľkosť — táto hodnota ovplyvňuje border-width na všetkých troch stranách a určuje, aký veľký bude trojuholník.
Vyberte farbu viditeľného (plného) okraja, ktorá sa stane výplňovou farbou trojuholníka.
Skopírujte vygenerovaný CSS kód a použite ho na prvok s width: 0 a height: 0 — funguje to dobre na prázdnom <div> aj na pseudo-elemente ako ::before/::after.

Príklad

Vstup

Smer: dole · Veľkosť: 60px · Farba: #ea580c

Výstup

width: 0;
height: 0;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
border-top: 60px solid #ea580c;

Pri trojuholníku smerujúcom dole ide plná farba na border-top, zatiaľ čo ľavý a pravý okraj zostávajú priehľadné — teda na opačnej strane, než kam trojuholník smeruje.

Prečo je dôležitá nulová šírka a výška

Trik funguje len preto, že prvok nemá vlastný obsahový box — width: 0 a height: 0 znamenajú, že celý viditeľný tvar vzniká výhradne zo stretávajúcich sa okrajov v strede. Ak má prvok akúkoľvek šírku alebo výšku, okraje sa už nezužujú do čistého bodu a tvar sa rozpadne. Preto táto technika funguje rovnako dobre na prázdnom <div> aj na pseudo-elemente ::before/::after s content: "" — nie je potrebný žiadny skutočný obsah, len box okrajov.

Dokumentácia MDN o CSS vlastnosti border popisuje, ako sa border-width, border-style a border-color kombinujú, vrátane toho, ako sa okraje na susedných stranách stretávajú pod uhlom (developer.mozilla.org/en-US/docs/Web/CSS/border) — geometrický fakt, na ktorom stojí celá táto technika.

Bežné použitia CSS trojuholníkov

Ukazovatele tooltipov a rečových bublín: malý trojuholník (6–10px) umiestnený na okraji zaobleného rámčeka, farebne zladený s pozadím rámčeka.
Šípky rozbaľovacích menu a select prvkov: malý trojuholník smerujúci dole vedľa tlačidla alebo select prvku, signalizujúci, že otvára menu.
Indikátory akordeónu/rozbalenia: trojuholník smerujúci doprava, ktorý sa otočí smerom dole pri rozbalení sekcie.
Vlastné odrážky zoznamu: malý trojuholník smerujúci doprava namiesto predvolenej odrážky prehliadača, pre výraznejší štýl zoznamu.
Jednoduché rohy bannerov/stužiek: trojuholník zasunutý do rohu karty, ktorý simuluje efekt zloženej stužky.

Kombinácia s ďalšími CSS nástrojmi

Trojuholníky použité ako ukazovatele tooltipov zvyčajne potrebujú zodpovedajúci tieň, aby vizuálne pôsobili spolu s rámčekom, ku ktorému patria — takýto tieň vytvorí Generátor Box Shadow. Pre tvary UI presahujúce trojuholníky (šípky, hviezdy, šesťuholníky) je vo všeobecnosti lepším moderným prístupom clip-path než skladanie ďalších trikov s okrajmi.

→ Generátor box-shadow · Generátor border-radius

Časté otázky

Prečo ide farba na opačný okraj, než kam trojuholník smeruje?

Predstavte si prvok ako diamant zložený zo štyroch trojuholníkových segmentov okrajov stretávajúcich sa v strede. Ak je plná farba na hornom okraji, viditeľný tvar zaberá hornú polovicu — ale keďže prvok má nulovú veľkosť, tento 'horný' trojuholník v skutočnosti smeruje nadol, tam kde by bol neexistujúci obsahový box prvku. Rovnaká logika platí pre všetky štyri smery.

Môžem vytvoriť trojuholník, ktorý nie je dokonale rovnoramenný?

Áno — tento nástroj vždy pre jednoduchosť generuje symetrický trojuholník, ale skopírovaný CSS kód môžete následne ručne upraviť. Ak nastavíte dve priehľadné border-width na rôzne hodnoty, trojuholník sa nakloní na jednu stranu; nezávislá zmena šírky plného okraja zmení jeho výšku bez vplyvu na šírku základne.

Funguje táto technika vo všetkých prehliadačoch?

Áno — trik s trojuholníkom založený na okrajoch spolieha len na základnú podporu border-width, border-style a border-color, ktorá existuje od najstarších implementácií CSS. Je to jedna z najkompatibilnejších čisto CSS techník na vytváranie tvarov.

Kedy použiť clip-path namiesto triku s okrajmi?

Trik s okrajmi je ideálny špecificky pre jednoduché trojuholníky, keďže nevyžaduje žiadne ďalšie vlastnosti a funguje všade. Pre čokoľvek zložitejšie — päťuholníky, hviezdy, šípky so zárezom alebo diagonálne rezy na boxe, ktorý stále potrebuje zobrazovať obrázok na pozadí — je clip-path flexibilnejší a jednoduchšie sa s ním pracuje, hoci má užšiu podporu v starších prehliadačoch.

Môžem do trojuholníka vložiť text alebo ikonu?

Nie priamo — keďže prvok trojuholníka má nulovú šírku a výšku, neexistuje žiadny obsahový box, do ktorého by sa dalo niečo vložiť. Ak chcete trojuholník skombinovať s textom alebo ikonou, použite ho ako dekoratívny pseudo-element (::before/::after) na nadradenom prvku, ktorý ho absolútne umiestni, a samotný obsah nadradeného prvku štýlujte samostatne.