johnny04501 johnny04501 - 9 months ago 43
CSS Question

how to deform element from top and botoom

Is there any way in

to deform the element from top and bottom as shown in below image? I don't wanna use
for this.

enter image description here


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

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