Generator de cerc CSS - 50% rază de frontieră
Proiectați vizual raza marginii CSS: patru glisoare de colț independente în pixeli sau procente, o comandă rapidă pentru toate colțurile pentru cercuri și pastile instantanee, plus un mod blob organic cu forme aleatorii.
Rezultat
Această pagină deschide generatorul de rază de margine cu toate cele patru colțuri legate și setate la 50%, valoarea care transformă o casetă într-un cerc folosind nimic altceva decât CSS. Sincer: pe o cutie pătrată se formează un cerc perfect, dar pe o cutie dreptunghiulară aceleași 50% produc în schimb o elipsă asemănătoare unui stadion, deoarece fiecare colț își rotunjește doar propriul sfert.
Această distincție contează, deoarece 50% rază de margine este cel mai comun mod de a construi avatare circulare, insigne de pictograme și puncte de stare în CSS - mult mai simplu decât tăierea unui cerc cu o mască sau desenarea unuia în SVG și rămâne clară la orice dimensiune, deoarece este un procent relativ, nu o rază fixă a pixelilor.
Comutați caseta la o dimensiune pătrată fixă în propriul dvs. CSS pentru a bloca cercul perfect sau lăsați-o dreptunghiulară intenționat pentru o formă asemănătoare unei pastile - în orice caz, colțurile rămân legate aici, astfel încât un singur glisor le menține pe toate patru sincronizate în timp ce copiați CSS-ul rezultat.