Как сверстать округлую аватарку без маски (пример приложил)?

Question

[Serge999111]

Как сверстать округлость (не совсем круглую) аватарки.

То есть, это как бы не круг. И как бы border-radius не даёт такой эффект.

Такой результат получил с помощью маски. И всё работает. Но может есть более простое решение на одном css без использования масок?

Comments

[Froggyweb]

И как бы border-radius не даёт такой эффект.

Дает https://codepen.io/froggyweb/pen/QWqrwPp

[Serge999111]

Если вы присмотритесь. То border-radius не даёт такой радиус угла как на картинке. Border-radius даёт именно ОКРУГЛЫЙ угло. То есть. Округляет угол из точки. Формирует угол, который является частью окружности с заданным радиусом. На изображении радиус не постоянный. А переменный. В "углу" изображения радиус окружности один. А по мере расхождения на центры по краям, радиус меняется.

На изображении угол выпуклый как бы. Такой же вариант примерно в контактах viber.

Answer 1

[Everybody_Lies]

тяжело на глаз подбирать, но думаю идею вы уловили

Comments

[Serge999111]

Через бордер радиус. Не то выходит. В изображении углы более выпуклые. А бордер радиус - задаёт окружность углов (круг в прямом смысле). В изображении же, углы как бы не круглые. Такие аватарки у контактов в viber'е