.semiCircleBottom {
  position: relative;
  background: black;
  height: 50vh;
}

.semiCircleBottom::before {
  position: absolute;
  content: '';
  left: 50%;
  z-index: 10;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: grey;
  transform: translateX(-50%) translateY(50%);
  bottom: 0px;
}

body {background:grey}