Preskoči na sadržaj
TextArray1.87.0
100% lokalno

CSS generator trokuta i strelica

Pretvorite smjer, veličinu i boju u CSS pravilo koje crta trokut ili strelicu — bez potrebe za slikom.

Rezultat
Slični alati
Generator CSS border-radiusnovoAlati za programere
CSS clamp() generatorAlati za programere
Generator CSS gridaAlati za programere
i18n tipka difAlati za programere
Konverter iz TOML u JSONAlati za programere
SQL u JSONAlati za programere
CSS generator trokuta i strelica
Odaberite smjer, szerokość i visinu te boju, a ovaj alat će napisati CSS pravilo koje crta oblik — trokut koji pokazuje gore, dolje, lijevo ili desno, ili kutni trokut za značku u stilu trake. Nema datoteke slike za izvoz i nema dodatnog HTML-a: oblik je čist CSS, pa se skalira čisto na bilo kojoj veličini i ostaje oštar na zaslonom s visokom gustoćom piksela. To je temeljni blok iza padajućih karata, pokazivača akordiona, trakastih znački i malog pokazivača na tooltip ili mjehurić za razgovor.
Dva su tehnike podržane. Trik s obrubom postavlja prozor veličine nula s transparentnim suprotnim obrubima i boji ostatak — klasični recept s najvećim podrškom preglednika. clip-path umjesto toga crta oblik na dimenzioniranom okviru koristeći poligon, što je lakše čitati u dev alatima i animirati. Prebacujete se između njih pomoću opcije tehnike.
Uključite "Koristite kao ::after pseudo-element" za pravilo s opsegom ::after, apsolutno pozicionirano ob kojem god ste odabrali stranicu ili kut, spremno za spuštanje na element koji već ima relativno pozicioniranje — točno ono što trebaju padajući karet ili pokazivač tooltip-a, bez dodatnog HTML-a. Umjesto toga uključite "Mjehurić za razgovor s priloženom strelicom" i alat genira dva pravila zajedno: obrubljeni, zaobljeni okvir za pozive i rep strelice pričvršćen na njegovu stranicu, koji pokazuje na način koji ste odabrali — oblik iza mjehurića za razgovor ili popover s tekstom pomoći.
Sve se pokreće u vašem pregledniku: ništa što konfigurirate se nikada ne šalje nigdje. Kopirajte generirani CSS, preuzmite ga kao .txt datoteku ili ga pošaljite na ulaz drugog alata — generator granica-polumjera ili clip-path generator-a, na primjer — da biste nastavili usavršavati oblik.
FAQ
Koju tehniku trebam koristiti, border ili clip-path?
Trik s obrubom ima najširu podršku preglednika i to je standardni recept koji ćete vidjeti u većini CSS vodiča. clip-path stvara stvarni, dimenzioniran okvir s vidljivim graničnim područjem u dev alatima, što ga olakšava za otklanjanje grešaka ili animaciju — koristite ga osim ako trebate podržati vrlo stare preglednike.
Koja je razlika između smjera ruba i smjera kuta?
Gore, dolje, lijevo i desno crtaju simetričan trokut koji pokazuje na taj način — oblik iza strelice ili pokazivača pomicanja. Četiri kutne opcije crtaju pravokutni trokut koji ispunjava jedan kut okvira, oblik iza trakaste značke ili efekta savijenog kuta.
Dodaje li opcija pseudo-elementa također pravilo pozicioniranja za roditeljsku stranicu?
Pozicionira pseudo-element sam s position: absolute i ispravnim offsetima za smjer koji ste odabrali. Roditeljski element još trebate position: relative (ili drugi kontekst pozicioniranja) kako bi to postavljanje bilo relativno prema njemu — dodajte to pravilo bilo kojem selektoru kojem priložite pseudo-element.
Mogu li koristiti mjehurić za razgovor kao tooltip?
Da. Genira obrubljeni, zaobljeni okvir za pozive plus priloženu strelicu koja pokazuje smjer koji ste odabrali, što je točno oblik koji trebaju tooltip ili popover za tekst pomoći. Prilagodite širinu, visinu i boju svom dizajnu, zatim dodatno stilizujte okvir (pozadina, sjena, boja teksta) u vlastitoj stilskoj tablici.
Je li bilo što što upišem ili konfiguriram učitano negdje?
Ne. CSS se genira potpuno u vašem pregledniku iz opcija koje odaberete — ništa se ne šalje na server.