CSS-i ringigeneraator – 50% piiriraadius
Kujundage CSS-i piiriraadiust visuaalselt: neli sõltumatut nurgaliugurit pikslites või protsentides, link-all-corners otsetee vahetute ringide ja pillide jaoks ning orgaaniline blob-režiim juhuslike kujunditega.
Tulemus
See leht avab piiriraadiuse generaatori, mille kõik neli nurka on lingitud ja seatud väärtusele 50%, mis muudab kasti ringiks, kasutades ainult CSS-i. Ausalt öeldes: ruudukujulisel kastil teeb see täiusliku ringi, kuid ristkülikukujulisel kastil tekitab sama 50% staadionilaadse ellipsi, kuna iga nurk ümardab alati ainult oma kvartali.
See eristus on oluline, sest 50% piiriraadius on kõige levinum viis ringikujuliste avatarite, ikoonimärkide ja olekupunktide loomiseks CSS-is – palju lihtsam kui maskiga ringi lõikamine või SVG-s ringi joonistamine ning see jääb igas suuruses teravaks, kuna see on suhteline protsent, mitte fikseeritud piksliraadius.
Täiusliku ringi lukustamiseks muutke oma CSS-is kast fikseeritud ruudu suurusele või jätke see pillilaadse kuju saamiseks meelega ristkülikukujuliseks – mõlemal juhul jäävad nurgad siin lingitud, nii et üks liugur hoiab kõik neli sünkroonis, kui kopeerite saadud CSS-i.