Как повысить резкость границы div с помощью CSS?

Question

Я пытаюсь создать div в форме луны, например:

Мне нужно было сделать следующее:

.half-circle {
    width: 100%;
    height: 50px;
   
    background-color: gold;
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
   
}

<div class="half-circle"></div>

Возможна более точная настройка с помощью CSS?

Answer 1

С некоторым вращением это можно сделать:

.half-circle {
  width: 100%;
  height: 250px;
  position: relative;
  z-index:0;
  overflow: hidden;
}

.half-circle::before {
  content: "";
  position: absolute;
  z-index:-1;
  width: 2000px;  /* this need to be as big as possible to cover a big area */
  height: 2000px; /* this need to be the same as width */
  left: 50%;
  top: 50%;
  /* adjust the -65% and the 75deg to control the height 
     don't touch the other
  */
  transform: translate(-50%, -65%) rotateX(75deg) rotate(45deg);
  background-color: gold;
  border-radius:0 0 10% 0;
}

<div class="half-circle"></div>