CSS kód
Vlož kód do svého stylopisu a přiřaď třídu .triangle libovolnému prvku. Trojúhelník využívá klasickou border techniku — funguje ve všech prohlížečích.
Jak generátor CSS trojúhelníků použít
- Vyberte směr, kam má špička trojúhelníku mířit. Na výběr máte osm možností včetně diagonálních rohů.
- Nastavte šířku a výšku. Poměr obou hodnot určuje, jestli bude trojúhelník ostrý, nebo spíš zavalitý.
- Zvolte barvu výplně. Náhled se překreslí okamžitě, takže hned vidíte výsledek.
- Zkopírujte vygenerovaný CSS kód a vložte ho do svého stylopisu.
Jak funguje CSS triangle přes border
Trik s CSS trojúhelníkem využívá způsob, jakým prohlížeč vykresluje okraje. Když má element nulovou šířku i výšku, jeho čtyři okraje se potkají v jednom bodě. Každý z nich se zkosí do klínu a dohromady tvoří čtyři trojúhelníky, které se dotýkají špičkami.
Stačí tedy nechat viditelný jen jeden okraj a sousední dva nastavit na transparent. Zbyde jediný barevný klín, tedy váš trojúhelník. Pro špičku dolů obarvíte horní okraj a levý s pravým zprůhledníte. Tahle technika funguje ve všech prohlížečích a nepotřebuje žádný obrázek ani SVG.
K čemu se CSS trojúhelník hodí
Nejčastěji ho potkáte jako špičku u bublin. Tooltip nad tlačítkem, popisek u grafu nebo bublina v chatu, ta drobná šipka mířící ke zdroji je typický CSS trojúhelník přes border. Protože jde o čistý CSS, ostrost zůstává i na retina displejích.
Dobře poslouží i jako šipka u rozbalovacích nabídek, indikátor u accordionu nebo ozdobný prvek v patičce. Trojúhelník se dá pomocí pseudoelementu ::after připojit k jakémukoli boxu, aniž byste museli přidávat další HTML.
Border trik, nebo clip-path?
Border trik je nejrozšířenější a nejlépe podporovaný, ale umí jen rovné klíny. Pokud potřebujete složitější tvar nebo šikmé strany pod libovolným úhlem, sáhněte po vlastnosti clip-path s funkcí polygon(). Tam si definujete přesné souřadnice vrcholů.
Rozdíl je i v chování. Trojúhelník z border trik má rozměry dané tloušťkou okrajů, kdežto clip-path ořízne skutečný element, takže se do něj dá vložit pozadí nebo obrázek. Pro jednoduchou špičku u bubliny stačí border, na tvarování celých bloků je clip-path praktičtější.
Časté otázky
Proč musí mít element nulovou šířku a výšku?
Aby se okraje potkaly ve špičce. Kdyby měl element rozměry, mezi okraji by zůstal obsahový prostor a klíny by se změnily na lichoběžníky. Nulová velikost zaručí, že okraj bude přesně trojúhelníkový.
Jak změním velikost trojúhelníku?
Přes tloušťku okrajů. Vyšší hodnota u obarveného okraje prodlouží trojúhelník, širší průhledné okraje ho rozšíří. V generátoru k tomu slouží pole pro šířku a výšku, kód se přepočítá sám.
Funguje CSS trojúhelník ve všech prohlížečích?
Ano. Border trik je stará a spolehlivá technika, kterou zvládne každý prohlížeč včetně starších verzí. Nepotřebuje žádné prefixy ani záložní řešení.