johnny04501 johnny04501 - 5 months ago 10
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

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

Comments