CSS triangel- och pilgenerator
Ange en riktning, storlek och färg och få en CSS-regel som ritar en triangel eller pil — utan bilder.
CSS triangel- och pilgenerator
Välj en riktning, en bredd och höjd, och en färg, och det här verktyget skriver CSS-regeln som ritar formen — en triangel som pekar upp, ner, vänster eller höger, eller en hörnpunkt för ett band-liknande märke. Det finns ingen bildfil att exportera och inget extra märkup att lägga till: formen är ren CSS, så den skalas rent på vilken storlek som helst och förblir skarp på högupplösta skärmar. Det är byggstenen bakom listrutepil, dragspelsikoner, band-märken och den lilla pekaren på ett verktygstips eller en pratbubblor.
Två tekniker stöds. Border-tricket sätter motsatta kanter på en box med nollstorlek till genomskinlig och färgar resten — det klassiska receptet, med det bredaste webbläsarstödet. clip-path ritar istället formen på en stor box med hjälp av en polygon, som är lättare att läsa i utvecklingsverktyg och att animera. Växla mellan dem med teknikalalternativet.
Sätt på "Använd som ::after pseudo-element" för en regel begränsad till ::after, absolut positionerad mot den sida eller hörnpunkt du valde, redo att släppa på ett element som redan har relativ positionering — exakt vad en dropdownpil eller ett verktygstips behöver, utan extra HTML. Sätt på "Pratbubblor med pil" istället och verktyget genererar två regler tillsammans: en kantlinjerad, rundad pratbox och en pilsvans fäst vid kanten, pekar i den riktning du valde — formen bakom en pratbubblor eller en hjälptext-popover.
Allt körs i din webbläsare: ingenting du konfigurerar skickas någonsin någonstans. Kopiera den genererade CSS, ladda ner den som en .txt-fil eller skicka den till ett annat verktygs inmatning — till exempel border-radius- eller clip-path-generatorerna — för att fortsätta att förfina formen.