Generátor CSS trojuholníkov a šípok
Smer, rozmery a farba premieňte na CSS pravidlo, ktoré nakreslí trojuholník alebo šípku bez obrázka.
Generátor CSS trojuholníkov a šípok
Zvolte smer, šírku a výšku, a tento nástroj napíše CSS pravidlo, ktoré nakreslí tvar - trojuholník smerujúci hore, dole, vľavo alebo vpravo, alebo rohový trojuholník pre štítok s páskou. Nie je potrebný žiadny obrázok na export ani extra markup: tvar je čistý CSS, takže sa pekne škáluje na akejkoľvek veľkosti a zostane ostrý na obrazovkách s vysokou hustotou. Je to stavebný kameň rozbaľovacích šípok, indikátorov harmonika, páskových znáčok a malého ukazovateľa na tip alebo bublina s chatom.
Sú podporované dve techniky. Border trick nastavuje hranice opačného smeru na priehľadné a nafarbi zvyšok - klasický recept s najširšou podporou prehliadačov. clip-path namiesto toho nakreslí tvar na zmenšenom poli pomocou polygónu, čo je ľahšie čitateľné v dev tools a animovateľné. Medzi nimi prepínajte pomocou možnosti techniky.
Zapnite možnosť Použiť ako pseudo-element ::after a vytvorí sa pravidlo s rozsahom ::after, absolútne pozicionované tesne vedľa zvoleného smeru alebo rohu, pripravené na umiestnenie na prvok, ktorý už má relatívne pozicionovanie - presne to, čo potrebuje rozbaľovacia šípka alebo ukazovateľ tipu, bez dodatočného HTML. Zapnite namiesto toho možnosť Bublinový dialóg so šípkou a nástroj vygeneruje dve pravidlá spolu: ohraničenú, zaoblenú bublinu s komentárom a šípku pripojený na jej hranu, smerujúc zvoleným smerom - tvar za bublinkou v chate alebo pomocným popoverom.
Všetko sa spúšťa vo vašom prehliadači: všetko, čo nakonfigurujete, sa nikdy nikam neposiela. Skopírujte vygenerovaný CSS, stiahnite si ho ako súbor .txt alebo ho pošlite na vstup ďalšieho nástroja - napríklad generátor border-radius alebo clip-path - aby ste pokračovali v zdokonaľovaní tvaru.