CSS driehoek- en pijlgenerator
Voer een richting, grootte en kleur in en krijg een CSS-regel die een driehoek of pijl tekent — geen afbeelding nodig.
CSS driehoek- en pijlgenerator
Kies een richting, een breedte en hoogte, en een kleur, en dit hulpmiddel schrijft de CSS-regel die de vorm tekent — een driehoek die omhoog, omlaag, links of rechts wijst, of een hoekdriehoek voor een lint-achtig badge. Er is geen afbeeldingsbestand om te exporteren en geen extra opmaak om toe te voegen: de vorm is zuiver CSS, dus het schaalt schoon op elke grootte en blijft scherp op schermen met hoge resolutie. Het is het bouwsteen achter dropdowncaretten, accordeon-indicatoren, lint-badges en de kleine aanwijzer op een tooltip of een toespraakbel.
Twee technieken worden ondersteund. De border-trick stelt tegengestelde randen van een box met nulgrootte in op transparant en kleurt de rest — het klassieke recept, met de breedste browserondersteuning. clip-path tekent in plaats daarvan de vorm op een grote box met behulp van een veelhoek, wat gemakkelijker te lezen in dev tools is en aan te passen. Wissel ertussen met de opdrachtoptie.
Zet "Gebruiken als ::after pseudo-element" aan voor een regel met ::after, absoluut gepositioneerd tegen de zijde of hoek die u hebt gekozen, gereed om op een element te zetten dat al relatief positioneren heeft — precies wat een vervolgkeuze-karaat of aanwijzer van een tooltip nodig heeft, zonder extra HTML. Zet in plaats daarvan "Toespraakbel met pijl" aan en het hulpmiddel genereert twee regels samen: een omrande, afgeronde afspeelbox en een pijlstaart aan de rand, wijzend in de richting van uw keuze — de vorm achter een toespraakbel of een hulp-tekst-popover.
Alles werkt in uw browser: niets van wat u configureert, wordt ooit ergens naartoe verzonden. Kopieer de gegenereerde CSS, download deze als .txt-bestand of stuur deze naar de invoer van een ander hulpmiddel — bijvoorbeeld naar de rand-radius- of clip-path-generatoren — om de vorm verder aan te passen.