Generátor CSS trojúhelníků

Co je tento nástroj?

CSS nemá žádný vyhrazený tvar trojúhelníku, takže se trojúhelníky vytvářejí dobře známým řešením: vezměte element s nulovou šířkou a nulovou výškou, dejte mu plný okraj na jedné straně a průhledné okraje na dalších dvou sousedních stranách. Protože se sousední okraje setkávají pod úhlem 45 stupňů, průhledné okraje se zužují do bodu a viditelný zůstává jen barevný okraj jako trojúhelník.

Tento nástroj za vás sestaví tuto strukturu: zvolte, kterým směrem má trojúhelník mířit, jak velký má být a jakou barvu má mít, poté sledujte aktualizaci živého náhledu a zkopírujte přesné CSS. Stejný podkladový trik se používá po celém webu pro čisté CSS šipky, ukazatele tooltipů a šipky rozbalovacích menu.

Zdroj: CSS Backgrounds and Borders Module Level 3, W3C — definuje, jak se sousední hrany okrajů setkávají pod úhlem, což je mechanismus, na kterém tato technika trojúhelníku staví.

Proč ho používat?

• Živý náhled vykresluje skutečný trojúhelník, takže si potvrdíte velikost, směr a barvu předtím, než cokoli zkopírujete.
• Pokrývá všechny čtyři základní směry — nahoru, dolů, doleva, doprava — jedním ovládacím prvkem.
• Nejsou potřeba žádné soubory s obrázky nebo SVG — trojúhelník vytvořený tímto způsobem je jen pár řádků CSS.
• Užitečné pro ukazatele tooltipů, šipky rozbalovacích/akordeonových menu, vlastní odrážky a jednoduché dekorativní tvary.
• Běží kompletně ve vašem prohlížeči — nic, co nastavíte, se nikam nenahrává.
• Zdarma, bez registrace, funguje na mobilu.

Jak se používá

1. Vyberte směr — trojúhelník míří nahoru, dolů, doleva nebo doprava podle toho, která strana dostane plný okraj.
2. Nastavte velikost — ta řídí hodnotu border-width na všech třech stranách a určuje, jak velký trojúhelník bude.
3. Vyberte barvu pro viditelný (plný) okraj, který se stane výplňovou barvou trojúhelníku.
4. Zkopírujte vygenerované CSS a aplikujte ho na element s width: 0 a height: 0 — prázdný <div> nebo pseudo-element jako ::before/::after fungují dobře oba.

Příklad

Vstup

Směr: dolů · Velikost: 60px · Barva: #ea580c

Výstup

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

U trojúhelníku mířícího dolů jde plná barva na border-top, zatímco levý a pravý okraj zůstávají průhledné — opačná strana od směru, kam trojúhelník míří.

Proč záleží na nulové šířce a výšce

Trik funguje pouze proto, že element nemá vlastní content box — width: 0 a height: 0 znamenají, že celý viditelný tvar pochází čistě z okrajů setkávajících se ve středovém bodě. Pokud má element jakoukoli šířku nebo výšku, okraje se už nezužují do čistého bodu a tvar se rozbije. To je také důvod, proč technika funguje stejně dobře na prázdném <div> nebo na pseudo-elementu ::before/::after s content: "" — není potřeba žádný skutečný obsah, jen box okraje.

Dokumentace MDN k CSS vlastnosti border popisuje, jak se border-width, border-style a border-color kombinují, včetně toho, jak se okraje na sousedních stranách setkávají diagonálně (developer.mozilla.org/en-US/docs/Web/CSS/border) — geometrický fakt, na kterém je celá tato technika postavena.

Běžná použití CSS trojúhelníků

• Ukazatele tooltipu a bubliny s textem: malý trojúhelník (6–10px) umístěný na okraji zaobleného boxu, obarvený stejně jako pozadí boxu.
• Šipky rozbalovacích menu a select prvků: malý trojúhelník mířící dolů vedle tlačítka nebo select elementu, který naznačuje, že se otevírá menu.
• Indikátory akordeonu/rozbalení: trojúhelník mířící doprava, který se otočí a míří dolů, když je sekce rozbalená.
• Vlastní odrážky seznamu: malý trojúhelník mířící doprava místo výchozí prohlížečové odrážky, pro výraznější styl seznamu.
• Jednoduché rohy bannerů/pásek: trojúhelník zasunutý do rohu karty, který simuluje efekt přehnuté pásky.

Kombinace s dalšími CSS nástroji

Trojúhelníky používané jako ukazatele tooltipu obvykle potřebují odpovídající vržený stín, aby vizuálně seděly s boxem, ke kterému jsou připojeny — Generátor Box Shadow tento stín vytvoří. Pro UI tvary přesahující trojúhelníky (šipky, hvězdy, šestiúhelníky) je clip-path obecně lepší moderní přístup než skládání dalších triků s okraji.

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

Časté dotazy