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

Разбираемся в CSS
Ответить
Anonymous
 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
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «CSS»