Угловой значок: меняйте форму по мере увеличения длины. ⇐ CSS

[Anonymous]

Я использую значок Angular Material и хочу, чтобы форма была полным кругом, если содержимое состоит из одной или двух цифр/символов
[img]https://i .sstatic.net/aoVYl.png[/img]
и превратится в прямоугольник с изогнутыми краями (как значки значков Android/iPhone). Однако я либо получаю эллипсы

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

, и его форма увеличивается по мере увеличения содержимого.


Это CSS .mat-badge-content

Код: Выделить всё

{
width: auto;
display: grid;
min-width: 22px;
min-height: 18px;
text-align: center;
align-items: center;
padding: 2px;
// border-radius: 10px;
}

Пожалуйста, предложите, как мне получить круг, когда текст короткий, и прямоугольник с изогнутыми краями, когда текст длинный. Спасибо.

Подробнее здесь: https://stackoverflow.com/questions/570 ... -increases