Калькулятор скруглений вложенных элементов
Просто введите размеры блоков и радиус внутреннего элемента — калькулятор покажет значение, которое нужно задать внешнему контейнеру.
Для чего это нужно?
Это золотой стандарт проектирования. В профессиональном дизайне — будь то интерфейсы (UI), полиграфия или промышленное проектирование — существует правило: вложенные элементы должны иметь общий центр скругления. Если просто задать одинаковый радиус внешнему и внутреннему блоку, визуально они будут конфликтовать: линии перестанут быть параллельными, а углы будут казаться «раздутыми» или кривыми.
Немного математики
Для достижения гармонии используется принцип концентрических скруглений: центры дуг обоих объектов должны совпадать. В калькуляторе используется простая формула для этого. Чтобы внутренний и внешний радиусы имели общий центр скругления, внешний радиус должен быть равен сумме внутреннего радиуса и расстояния между стенками, делённому на два:
Внешний радиус = Внутренний радиус + (расстояние между блоками ÷ 2)
Использование
- Выберите режим: Вы можете вычислить внешний радиус, зная внутренний, или наоборот.
- Укажите размеры: Введите ширину внешнего контейнера и вложенного элемента.
- Задайте радиус: Впишите значение скругления того объекта, который вам известен.
- Получите результат: Используйте итоговое число для второго блока в вашем CSS или графическом редакторе.