CSS Only Curved Tab

by samih

HTML

<div id="a"></div>
<div id="b"></div>
<div id="e"></div>
<div id="f"></div>
<div id="x"></div>
<div id="y"></div>
<div id="w"></div>
<div id="z"></div>

CSS

div {
    border: none;
    background: grey;
}


#a {
    position: absolute;
    left: 90px;
  	top: 50px;
    width: 200px;
    height: 50px;
    z-index: 3;
  	border-bottom: 1px solid black;
  	border-right: 1px solid black;
  	border-left: 1px solid black;
}

#b {
    position: absolute;
    left: 115px;
  	top: 20px;
    width: 150px;
    height: 50px;
    border-radius: 20px;
  	border: 1px solid black;
    z-index: 2;
}

#e {
    position: absolute;
    left: 14px;
    width: 100px;
    height: 100px;
    border-radius: 50px;
  	border: none;
    background: #fff;
    z-index: 4;
  	border: 1px solid black;
}

#f {
    position: absolute;
    left: 266px;
    width: 100px;
    height: 100px;
    border-radius: 50px;
  	border: none;
    background: #fff;
    z-index: 4;
  	border: 1px solid black;
}
#x {
    position: absolute;
    left: 10px;
    width: 105px;
    height: 50px;
  	border: none;
    background: #fff;
    z-index: 4;
}
#y {
    position: absolute;
    left: 267px;
    width: 105px;
    height: 50px;
  	border: none;
    background: #fff;
    z-index: 4;
}
#w {
    position: absolute;
    left: 10px;
  	top: 50px;
    width: 80px;
    height: 55px;
  	border: none;
    background: #fff;
    z-index: 4;
}
#z {
    position: absolute;
    left: 292px;
  	top: 50px;
    width: 80px;
    height: 55px;
  	border: none;
    background: #fff;
    z-index: 4;
}