<body>
  <div id="footer">
    <div id="left"></div>
    <div id="content"><div>Oh yeah!</div></div>
    <div id="right"></div>
  </div>
</body>
body {
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  height:100vh;
  margin:0;
  background-image:url(https://images.pexels.com/photos/956981/milky-way-starry-sky-night-sky-star-956981.jpeg?auto=compress&cs=tinysrgb&h=1920&w=3000);
  background-repeat:no-repeat;
}
#footer {
  display:flex;
  justify-content:center;
}
#left, #right {
  background-color:white;
  height:100%;
  flex: 1 1 auto;
}
/* Rounded Corners */
#left {
  border-radius:0 16px 0 0;
}
#right {
  border-radius:16px 0 0 0;
}
 /* Where the magic happens */
#content {
   background-image:radial-gradient(circle 50px at top center, transparent 99%, white 0 );
   padding: 0 10px;
}
#content > div {
 background-color:green;
 position:relative;
 top: -50%;
 border-radius:50%;
 height:75px;
 width:75px;
 color:#fff;
 display:flex;
 justify-content:center;
 align-items:center;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.