So erstellen Sie eine gepresste Box mit nur CSS ⇐ CSS

[Anonymous]

Ich denke, wie man ein gepresstes Box wie folgt stymt:

fand, dass ich ein ähnliches Ergebnis erzielen kann. Hier ist der Codepen: https://codepen.io/micu22/ten/eyzpmqr.
Und hier ist der Code:

Code: Select all

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%;
}

Aber vielleicht gibt es eine einfachere oder nur elegantere Lösung?