Как сделать суперэллипс? Вопрос

Krakos Krakos 19 Октября 2021 (ред)

Всем привет! Хочу сделать внешний вид аватаров, как в Clubhouse:

Clubhouse, аватарки

Кто-нибудь делал похожее с помощью CSS?

CSS

1 Комментарий

  1. На фото выше, общий эффект (для восприятия) дают не только закруглённые углы с таким-то радиусом, а комбинация элементов. Добавление некоторые элементов вместе, наложение их и т.д. полностью меняют внешний вид. Если вопрос касается только закругления, то это достаточно просто.

    Сейчас, если мы посмотрим на исходный код, круглых аватарок, то можем увидеть что-то подобное:

    <img class="w44 br-rd-50 mr5" src="/uploads/users/avatars/a-1-1632597206.jpeg" alt="Evg">

    Присутствует: br-rd-50, который определяет радиус.

    .br-rd-50 { border-radius: 50%; }

    Добавим в файл style.css что-то подобное:

    .br-rd-42 { border-radius: 42%; }

    Найдем во всех файлах, в шаблонах br-rd-50 и заменим на br-rd-42 и у нас получится:

    Закругление углов аватарки

    Все остальные элементы, наложение, например, значков и т.д. требуют вносить изменения в сам код.

    P.S. дополнил. Теперь: br-rd-42 доступно в шаблонах. Просто найдите и замените br-rd-50 на br-rd-42 в шаблонах.