CSS Прямоугольник с двумя углами ⇐ CSS

[Anonymous]

Я пытаюсь создать входной блок прямоугольной формы со смещением угла в правый нижний угол. Я пробовал использовать псевдоэлемент ::after для достижения этой формы, но не смог получить ожидаемый результат.

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

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

.signIn-input {
display: flex;
align-items: center;
gap: 8.5px;
border: 1px solid #A4A4A4;
width: 100%;
height: 56px;
position: relative;
}

.signIn-input::after {
content: '';
position: absolute;
bottom: -5px;
right: -2px;
width: 0;
border-style: solid;
border-width: 8px 0 8px 8px;
border-color: transparent transparent transparent #A4A4A4;
transform: rotate(45deg);
}

В моем коде псевдоэлемент ::after должен применять угловое смещение к правому нижнему углу входного блока, но это работает не так, как ожидалось. Как мне решить эту проблему и добиться желаемого результата?

Подробнее здесь: https://stackoverflow.com/questions/784 ... -2-corners