how to deform element from top and bottom

Issue

Is there any way in css to deform the element from top and bottom as shown in below image? I don't wanna use background-image for this.

Solution

.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>

Answered By - Mohammad Usman