Corner shape
Как сделать squircle в CSS
Дизайнеры давно полюбили суперэллипсы за их уникальную способность создавать формы, которые находятся где-то между квадратом и кругом — плавные, гармоничные и визуально приятные. Эта фигура, также известная как сквиркл (от слов square и circle = squircle), впервые была описана в математике Габриэлем Ламе как обобщение эллипса, а популяризовал её датский учёный и дизайнер Пит Хейн в середине XX века. Он применял суперэллипсы в самых разных проектах — от транспортных развязок до мебели и посуды, а сегодня эта форма стала настоящим трендом в дизайне интерфейсов и продуктов, особенно благодаря её естественному и «органичному» виду.
Раньше верстальщикам было очень сложно воспроизвести подобные формы с помощью стандартных CSS-инструментов, таких как
border-radius, которые ограничивались простым скруглением углов по радиусу. Скругления по радиусу создавали резкие переходы между прямыми сторонами и закруглениями, что выглядело менее естественно и не позволяло добиться плавности, характерной для суперэллипсов. Для реализации подобных форм приходилось использовать сложные SVG-маски, изображения или хитроумные трюки с clip-path, что усложняло поддержку и адаптивность интерфейсов.
See the pen (@Websitio) on CodePen.
С появлением CSS-свойства corner-shape со значением squircle ситуация кардинально изменилась. Теперь дизайнеры и разработчики могут легко и нативно задавать углы в форме суперэллипса, получая плавные, эстетичные переходы без лишних костылей и дополнительного кода. Это значительно упрощает создание современных UI, где важна не только функциональность, но и визуальная гармония. Благодаря
corner-shape: squircle; суперэллипсы стали доступны в чистом CSS, что позволяет создавать более органичные и привлекательные интерфейсы с минимальными усилиями.
Таким образом, суперэллипсы прошли путь от математической абстракции и дизайнерского эксперимента до стандарта современного веб-дизайна, а поддержка их в CSS — важный шаг к более естественным и удобным для глаз интерфейсам.
Подробное описание супеэллипса и его функции https://frontendmasters.com/blog/understanding-css-corner-shape-and-the-power-of-the-superellipse/#the-power-of-superellipse
CSS corner-shape
Проверяйте поддержку на caniuse.com
На момент написания этой статьи, свойство corner-shape поддерживается только в Chrome Beta 139, Chrome Canary. То есть это совершенно новая технология, позволяющая управлять формой углов из CSS
Давно знакомый border-radius определяет «размер» кривой, а corner-shape её форму.
- round
(по умолчанию) - создает традиционные круглые или эллиптические углы
- squircle
- Плавное сочетание квадрата и круга
- scoop
- Вогнутые четверти эллипса
- bevel
- Прямые линии, соединяющие угловые точки
- notch
- Создание внутреннего угла
- square
- Ничего не скругляет вне зависимости от значения border-radius
Если браузер не поддерживает corner-shape, то будут отрисованы обычные скругления. Либо вы можете настроить другое поведение, например, задать фоновое изображение с помощью директивы @support
See the pen (@Websitio) on CodePen.
Можно создать и фигурки поинтереснее: ромбы, блики, крестики, шести или восьмиугольники.
See the pen (@Websitio) on CodePen.
CSS corners
Можно использовать краткую запись, объединяющую border-radius и corner-shape.
.rhombus {
corners: 50% bevel;
}
Более сложные формы с помощью нескольких строк на CSS
Для простоты все предыдущие примеры имели условно квадратную форму и одинаковые скругления всех четырех улов по обоим направлениям.
Но ведь border-radius может принимать до восьми различных значений (горизонтальные и вертикальные радиусы для каждого из четырех углов). Если к этому прибавить ещё и вариации с чудесным corner-shape, то получится большое поле для экспериментов. А потом подключить различные анимации — углов, их форм и размеров самих элементов. Очень эффектно и интересно!