Preskoči na vsebino
TextArray1.87.0
100% lokalno

CSS generator trikotnikov in puščic

Spremenite smer, velikost in barvo v CSS pravilo, ki črta trikotnik ali puščico — brez potrebe po sliki.

Izhod
Povezana orodja
Generator CSS border-radiusnovoOrodja za razvijalce
CSS clamp() generatorOrodja za razvijalce
Generator CSS mrežeOrodja za razvijalce
i18n tipka difOrodja za razvijalce
Pretvornik TOML v JSONOrodja za razvijalce
SQL v JSONOrodja za razvijalce
CSS generator trikotnikov in puščic
Izberite smer, višino in barvo, ta orodje pa piše CSS pravilo, ki črta obliko — trikotnik, ki kaže gor, dol, levo ali desno, ali vogalni trikotnik za značko v slogu traka. Ni potrebe po datoteki slike za izvoz in brez dodatnega HTML-ja: oblika je čist CSS, zato se skalira čisto na kakršnikoli velikosti in ostane oster na zaslonu z visoko gostoto pikslov. To je temeljni blok za padajoče kare, kazalce harmonike, trakaste značke in majhni kazalec na tooltip ali mehurček za pogovor.
Dve tehniki sta podprti. Trik z robom nastavi okno velikosti nič s prosojnimi nasprotnimi robovi in barva preostanek — klasičen recept z najširšo podporo brskalnika. clip-path namesto tega črta obliko na dimenzioniranem polju z uporabo poligona, kar je lažje brati v dev orodjih in animirati. Med njima se preklapljate z možnostjo tehnike.
Vključite "Uporabi kot ::after pseudo-element" za pravilo s področjem ::after, absolutno pozicionirano ob katerikoli strani ali kotu, ki ste ga izbrali, pripravljeno za spuščanje na element, ki že ima relativno pozicioniranje — točno to, kar potrebujeta padajoči karet ali kazalec tooltip-a, brez dodatnega HTML-ja. Namesto tega vključite "Mehurček za pogovor s pritrjeno puščico" in orodje genira dve pravili skupaj: obrobljeni, zaobljeni okvir za pozive in rep puščice, pritrjen na njegovem robu, ki kaže smer, ki ste jo izbrali — obliko za mehurček za pogovor ali popover s tekstom pomoči.
Vse se izvršuje v vašem brskalniku: nič, kar konfigurirate, nikoli ne pošlje nikamor. Kopirajte generirani CSS, ga preuzmite kot .txt datoteko ali ga pošljite na vnos drugega orodja — generator omejitev-polmera ali clip-path generator, na primer — da nadaljujete z urejevanjem oblike.
FAQ
Katero tehniko bi moral uporabiti, border ali clip-path?
Trik z robom ima najširšo podporo brskalnika in je standardni recept, ki ga boste videli v večini CSS priročnikov. clip-path ustvari pravi, dimenzioniran okvir z vidno mejno področjo v dev orodjih, kar ga olajša za odpravljanje napak ali animacijo — uporabite ga, razen če trebate podpreti zelo stare brskalnike.
Kakšna je razlika med smerjo roba in smerjo kota?
Gor, dol, levo in desno narišejo simetričan trikotnik, ki kaže na ta način — oblika puščice ali kazalca pomikanja. Štiri vogalne možnosti narišejo pravokotni trikotnik, ki zapolni en kot polja, obliko trakaste značke ali učinka zloženega vogala.
Ali opcija pseudo-elementa doda tudi pravilo pozicioniranja za matični element?
Pozicionira pseudo-element sam s position: absolute in pravilnimi odmiki za smer, ki ste ga izbrali. Matični element še vedno potrebuje position: relative (ali drugi kontekst pozicioniranja), da je to postavljanje relativno glede nanj — dodajte to pravilo kateremukoli selektorju, ki mu priložite pseudo-element.
Ali lahko uporabim mehurček za pogovor kot tooltip?
Ja. Genira obrobljeno, zaobljeno polje za pozive in pritrjeno puščico, ki kaže smer, ki ste ga izbrali, kar je točno oblika, ki jo potrebujeta tooltip ali popover besedila pomoči. Prilagodite širino, višino in barvo svojemu oblikovanju, nato pa dodatno stilizujte polje (ozadje, senca, barva besedila) v svojem razpredelomadu stilov.
Ali je kaj, kar sem vnesel ali konfiguriral, prenešeno nekam?
Ne. CSS se v celoti generiram v vašem brskalniku iz možnosti, ki jih izberete — nič se ne pošlje na strežnik.