Как сделать радиус «Мягкий квадрат»?

Question

[Алексей Виноградов]

Всем привет подскажите пожалуйста как можно добиться такой формы у иконки при помощи закругления или математики?

Comments

[Rustam Bainazarov]

Весёлого вас, к сожалению, ничего не ждёт. Только хаком это можно сделать.

https://medium.com/@zubryjs/squircles-bringing-ios...

Answer 1

[deppa1118]

Если вдруг ещё актуально то фигура называется squircle, на канале droider show есть про нее полное описание и мат функция как ее вывести https://youtu.be/GuFJTPf13RU

Answer 2

[Павел Атайкин]

Привет! для этого достаточно свойства border-radius. Вот тут https://developer.mozilla.org/ru/docs/Web/CSS/bord... документация с примерами, как сделать похожее. Тебе остаётся подобрать нужные числа для твоего случая.
-----
Внизу меня поправили. Согласен с этим, что через border-radius 1 в 1 не сделать. Простым вариантом может стать свойство mask-image дока: https://developer.mozilla.org/en-US/docs/Web/CSS/m...

P.S. поддержка браузерами хорошая, интерактив учитывать позволяет и без странных полигонов :)

Comments

[Rustam Bainazarov]

Конкретно с таким закруглением — огромная проблема. Ни через px/em, ни через проценты, ни через конструкцию x/x сделать это нельзя с border-radius.

Но весёлая статья и clip-path приходят на помощь:
https://medium.com/@zubryjs/squircles-bringing-ios...

[Павел Атайкин]

Рустам Байназаров, через border-radius можно хоть как-то приближено сделать, а вариант из статьи я думаю использовать не стоит. Он рабочий, но перебор по-моему. Разумным в таком случае будет использовать svg иконку под картинку или свойство mask-image.

P.S. если не требуется интерактив можно просто целиком иконку экспортировать :)

[Rustam Bainazarov]

Павел Атайкин, да, собственно, там всё очень просто. Можно прицепить к классу свойство clip-path с нужным значением и добавлять его к нужному блоку. Адаптивно и просто на самом деле, не зависит от размера элемента. Если это попытка воспроизвести их UI в CSS — надёжный хак. Я так сделал целую панель управления с его помощью. Все кнопки, поля и иконки, кроме, конечно, тех элементов, где мне ни в коем случае нельзя было обрезать вылезающий за пределы контент.

[Павел Атайкин]

Рустам Байназаров, Я ж согласился этим) Просто по факту mask-image делает тоже самое только нативно, в него тоже можно загнать svg. Оба варианту по факту реализуют маску и с mask-image как будто более нативно выглядит. Я думаю в данном случае на вкус и цвет. Я только хочу донести, что css mask тоже хорошо работает и выручает во многих случаях. Лично использовал в prod и пока проблем не возникало.

[Rustam Bainazarov]

Павел Атайкин, да, незаменимая вещь для сложных масок. К сожалению, есть небольшая проблема в виде адаптивности, по сути картинка ведь. Если есть углы, загругления и маска применяется к разногабаритным блокам, то будут искажения. Но всему свой инструмент, конечно. В данном случае что угодно можно использовать, согласен.

Answer 3

[Helcurt]

Это эллипс! Есть функция графика эллипса.