rounded-oval-div

by Timoleon Pagounas

HTML

<div class="container">
  <div class="header">
    this is the header
  </div>
</div>

CSS

.container{
  position:relative;
  width:100%;
  height:100px;
  text-align:center;
  overflow:hidden;
  z-index:2;
}
.header{
  height:60px;
  position:absolute;
  top:0;
  bottom:0;
  left:-20px;
  right:-20px;
  background-color: green;
  border-bottom-right-radius:100%;
  border-bottom-left-radius:100%;
  padding:10px;
  box-shadow: 5px 15px 10px grey;
}