johnny04501 johnny04501 - 2 years ago 125
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

Answer Source

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download