johnny04501 johnny04501 - 1 year ago 78
CSS Question

how to deform element from top and botoom

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.

enter image description here

Answer Source

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