Generátor

CSS Generátor trojúhelníků

Generujte CSS trojúhelníky pomocí triku s ohraničením v 8 směrech, s vlastní velikostí a barvou.

Ctrl+Enter Copy CSS Esc Reset

Směr

Šířka (px)

Výška (px)

Barva

Náhled

CSS Výstup

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid #3b82f6;
}

O CSS generátoru trojúhelníků

CSS trojúhelníky se vytvářejí pomocí triku s ohraničením — element s nulovou šířkou a výškou a barevnými/průhlednými ohraničeními tvoří trojúhelník. Tento nástroj vám umožňuje vybrat směr, velikost a barvu a poté okamžitě vygeneruje CSS kód.

Procházet všechny nástroje Generátor

Jak používat

Vyberte směr (Nahoru, Dolů, Vlevo, Vpravo nebo diagonální), upravte posuvníky šířky a výšky, vyberte barvu a zkopírujte vygenerovaný CSS kód. Vložte ho do svého stylopisu a aplikujte třídu .triangle.

Běžné případy použití

Vytváření šipkových indikátorů a ukazatelů v UI
Stavba šipek tooltipů a rozbalovacích karetů
Navrhování dekorativních diagonálních oddělovačů sekcí
Vytváření oddělovačů drobečkové navigace a ikon šipek
Čistě CSS bubliny řeči s trojúhelníkovými ocásky

Jak používat CSS Generátor trojúhelníků Udělejte si přestávku a zahrajte si bezplatné hry v prohlížeči

Všechny příspěvky

c/tools_css-triangle-generator0

Zobrazit vše Vytvořit příspěvek