Генератор органічних CSS-форм «Крапля»
Проєктуйте CSS border-radius візуально: чотири незалежні повзунки для кутів у px або відсотках, швидка дія «Зв’язати всі кути» для миттєвого створення кіл і пігулок, а також режим органічної «Краплі» з випадковими формами.
Обробляється повністю у вашому браузері — те, що ви тут вводите, ніколи не вивантажується.
Результат
Про цей інструмент
Ця сторінка відкриває генератор border-radius безпосередньо в режимі «Крапля» з уже завантаженою органічною формою: жодних гострих кутів, жодного ідеального кола, просто м’який неправильний контур, створений лише засобами CSS. Натискайте «Випадково» будь-коли для свіжого варіанту.
Секрет кожної CSS-краплі — синтаксис із вісьмома значеннями через скісну риску: border-radius приймає два набори з чотирьох відсоткових значень, розділені скісною рискою, де перший набір визначає горизонтальні радіуси, а другий — вертикальні. Саме незбіг цих двох наборів порушує симетрію звичайного заокругленого прямокутника, перетворюючи його на органічний контур.
Такі краплі заповнюють порожній простір за зображеннями-хіроу, аватарами й ілюстраціями на незліченних сучасних цільових сторінках саме тому, що не потрібні жодні бібліотеки чи експорт SVG — це чотири рядки CSS. Скопіюйте поточну форму або продовжуйте випадковий вибір, доки одна не підійде для вашого макета.