Как создать сжимую коробку, используя только CSS ⇐ CSS

[Anonymous]

Я думаю, как стилизовать сжимую коробку, подобную следующему:

Я обнаружил, что я могу достичь аналогичного результата с элементами Pseudo и граничащим по цене. Вот CodePen: https://codepen.io/micu22/pen/eyzpmqr.
и вот код:

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

div {
background: lightblue;
padding: 10px 20px;
border-radius: 8px;
position: relative;
}
div::after,
div::before {
content: "";
position: absolute;
background: white;
width: 100%;
height: 20px;
left: 0;
}
div::before {
top: -17px;
border-radius: 50%;
}
div::after {
bottom: -17px;
border-radius: 50%;
}

Но, возможно, есть более проще или просто более элегантное решение?

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