Wie verformen Element von oben und unten

Question

Gibt es eine Möglichkeit in css das Element von oben und unten zu verformen, wie in der folgenden Abbildung gezeigt? Ich möchte dafür background-image nicht verwenden.

Answer 1

.box { 
 
    background: #363742; 
 
    position: relative; 
 
    overflow: hidden; 
 
    height: 200px; 
 
} 
 

 
.box:before, 
 
.box:after { 
 
    border-radius: 1000px/50px; 
 
    position: absolute; 
 
    background: #fff; 
 
    height: 80px; 
 
    content: ''; 
 
    right: -50px; 
 
    left: -50px; 
 
    top: -50px; 
 
} 
 

 
.box:after { 
 
    bottom: -50px; 
 
    top: auto; 
 
}

<div class="box"></div>