Уменьшите высоту справа вверху и внизу, используя только CSS. ⇐ Html

[Anonymous]

Как преобразовать фигуру с помощью CSS, чтобы уменьшить высоту справа вверху и внизу. В следующем коде у меня есть фигура на синем фоне, и я хочу создать фигуру, похожую на красную рамку.


Вот что я пытаюсь:

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

.parent {
perspective: 500px;
width: 200px;
height: 200px;
margin: 100px auto;
}

.child {
font-size: 118px;
height: 200px;
background-color: blue;
transform: rotateY(45deg) scaleY(0.5);
transition: transform 0.5s;
border-radius: 8px;
}

Ссылка на демо: https://jsfiddle.net/qmsw7893/

Подробнее здесь: https://stackoverflow.com/questions/793 ... g-css-only