CSS generator krugova — radijus obruba 50%.
Vizualno dizajnirajte radijus obruba CSS-a: četiri nezavisna kutna klizača u pikselima ili postocima, prečac povezivanja svih kutova za trenutne krugove i pilule, plus način organske mrlje s nasumičnim oblicima.
Rezultat
Ova stranica otvara generator radijusa obruba sa sva četiri povezana kuta i postavljena na 50%, vrijednost koja okvir pretvara u krug koristeći samo CSS. Iskreno govoreći: na kvadratnoj kutiji to čini savršeni krug, ali na pravokutnoj kutiji istih 50% proizvodi elipsu poput stadiona, budući da svaki kut zaokružuje samo svoju četvrtinu.
Ta je razlika važna jer je radijus obruba od 50% najčešći način za izradu kružnih avatara, bedževa ikona i statusnih točaka u CSS-u — daleko jednostavnije od izrezivanja kruga s maskom ili crtanja kruga u SVG-u, a ostaje jasan u bilo kojoj veličini budući da se radi o relativnom postotku, a ne o fiksnom radijusu piksela.
Prebacite okvir na fiksnu kvadratnu veličinu u vlastitom CSS-u kako biste ga zaključali u savršenom krugu ili ga namjerno ostavite pravokutnog za oblik poput pilule — u svakom slučaju, kutovi ostaju povezani ovdje tako da jedan klizač održava sva četiri sinkronizirana dok kopirate rezultirajući CSS.