Generátor CSS trojúhelníků a šipek
Změní směr, velikost a barvu na CSS pravidlo, které nakreslí trojúhelník nebo šipku bez obrázku.
Generátor CSS trojúhelníků a šipek
Vyberte směr, šířku a výšku, a tento nástroj napíše CSS pravidlo, které nakreslí tvar - trojúhelník směřující nahoru, dolů, vlevo nebo vpravo, nebo rohový trojúhelník pro páskový štítek. Není potřeba žádný soubor obrázku na export ani extra značka: tvar je čistý CSS, takže se čistě škáluje na libovolné velikosti a zůstává ostrý na vysokodenzitních obrazovkách. Je to stavební prvek rozbalovacích šipek, indikátorů akordeonů, páskových štítků a malého ukazatele na popis nebo bublinu chatu.
Sou podporovány dvě techniky. Border trick nastavuje opačné hranice nulové velikosti pole na transparentní a zbarvuje zbytek - klasický recept s nejširší podporou prohlížeče. clip-path místo toho nakreslí tvar na prvku s velikostí pomocí polygonu, což je v dev tools lépe čitelné a animovatelné. Přepínejte mezi nimi pomocí možnosti techniky.
Zapněte Použít jako pseudo-element ::after pro pravidlo omezené na ::after, absolutně pozicionované těsně vedle zvoleného směru nebo rohu, připravené k přidání na prvek, který již má relativní pozicování - přesně to, co potřebuje rozbalovací šipka nebo tooltip, bez extra HTML. Zapněte místo toho Bublina s připojenou šipkou a nástroj vygeneruje dvě pravidla dohromady: ohraničenou, zaokrouhlenou bublinu s poznámkou a šipku připojenou k jejímu okraji, směřující zvoleným směrem - tvar za chatovou bublinou nebo popádem s nápovědou.
Všechno běží ve vašem prohlížeči: nic, co nakonfigurujete, se nikdy nikam neposílá. Zkopírujte vygenerovaný CSS, stáhněte si ho jako soubor .txt nebo ho pošlete na vstup jiného nástroje - například generátor border-radius nebo clip-path - abyste pokračovali v zdokonalování tvaru.