Organic CSS Blob Shape Generator
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 neposredno v načinu blob z že naloženo organsko obliko: brez kvadratnih vogalov, brez popolnega kroga, samo mehak nepravilen oris, zgrajen samo iz CSS. Kadar koli pritisnite Randomize za svežo različico.
Trik v ozadju vsake pikice CSS je sintaksa poševnice z osmimi vrednostmi: border-radius sprejema dva niza štirih odstotkov, ločenih s poševnico, pri čemer prvi niz ukrivi vodoravne radije, drugi pa navpične. Neusklajenost obeh nizov je točno tisto, kar poruši simetrijo navadnega zaobljenega pravokotnika v organski obris.
Takšni madeži zapolnjujejo prazen prostor za slikami junakov, avatarji in ilustracijami na neštetih sodobnih ciljnih straneh, prav zato, ker ni potreben izvoz knjižnice ali SVG — gre za štiri vrstice CSS. Kopirajte trenutno obliko ali nadaljujte z naključnim izborom, dokler se ena ne zdi primerna za vašo postavitev.