Generator krogov CSS — 50 % polmer obrobe
Vizualno oblikujte polmer obrobe CSS: štirje neodvisni kotni drsniki v slikovnih pikah ali odstotkih, bližnjica za povezavo vseh vogalov za takojšnje kroge in pilule ter organski način madežev z naključnimi oblikami.
Rezultat
Ta stran odpre generator polmera obrobe z vsemi štirimi vogali, ki so povezani in nastavljeni na 50 %, kar je vrednost, ki polje spremeni v krog z uporabo nič drugega kot CSS. Iskreno povedano: na kvadratni škatli je to popoln krog, na pravokotni škatli pa istih 50 % proizvede stadionsko elipso, saj vsak vogal vedno zaokroži samo svojo četrtino.
Ta razlika je pomembna, ker je 50-odstotni polmer obrobe edini najpogostejši način za ustvarjanje krožnih avatarjev, značk ikon in statusnih pik v CSS – veliko preprostejši kot izrezovanje kroga z masko ali risanje kroga v SVG, in ostane jasen pri kateri koli velikosti, saj gre za relativni odstotek, ne za fiksni polmer slikovnih pik.
Preklopite polje na fiksno kvadratno velikost v svojem lastnem CSS-ju, da se zaklene v popoln krog, ali pa ga namenoma pustite pravokotnega za obliko, ki je podobna tabletam – v vsakem primeru ostanejo vogali tukaj povezani, tako da en sam drsnik ohranja vse štiri sinhronizirane, medtem ko kopirate nastali CSS.