CSS Circle Generator — 50 % kantradius
Design CSS-kantradius visuelt: fire uafhængige hjørneskydere i px eller procent, en genvej til alle hjørner til instant cirkler og piller, plus en organisk blob-tilstand med randomiserede former.
Resultat
Denne side åbner grænse-radius-generatoren med alle fire hjørner forbundet og sat til 50 %, den værdi, der forvandler en boks til en cirkel, der kun bruger CSS. Helt ærligt: På en firkantet boks giver dette en perfekt cirkel, men på en rektangulær kasse producerer de samme 50% i stedet en stadionlignende ellipse, da hvert hjørne kun runder sit eget kvarter af.
Den skelnen er vigtig, fordi 50 % kantradius er den mest almindelige måde at bygge cirkulære avatarer, ikonmærker og statuspunkter på i CSS - langt enklere end at klippe en cirkel med en maske eller tegne en i SVG, og den forbliver skarp i enhver størrelse, da det er en relativ procentdel, ikke en fast pixelradius.
Skift boksen til en fast firkantet størrelse i din egen CSS for at låse den perfekte cirkel ind, eller lad den være rektangulær med vilje for at få en pillelignende form - uanset hvad forbliver hjørnerne forbundet her, så en enkelt skyder holder alle fire synkroniseret, mens du kopierer den resulterende CSS.