Tab with curved top

by Danny_Joris

HTML

<img src="https://dl.dropboxusercontent.com/u/12905785/skitch/dropdown-crop.jpg">
<a href="#" id="tab">Academics____________</a>

CSS

body {
  background-color: #00386b;
}
#tab {
  position: relative;
  top: -60px;
  left: -175px;
  display: inline-block;
  width: auto;
  height: 30px;
  margin: 40px 0;
  padding: 25px 20px;
  background: #ccc;
  opacity: 0.9;

  color: #00386b;
  text-align: center;
  font-family: avenir, sans-serif;
  text-transform: uppercase;
  text-decoration: none;
  font-size: 16px;
}
#tab:before {
  content: '';
  position: absolute;
  top: -19px;
  left: -10px;
  right: -10px;
  bottom: 64px;
  background: #ddd;
  border-radius: 50% / 17px;
  clip: rect(auto 142px 15px 10px);
}