Параболическая форма css

Question

Я пытаюсь создать параболическую форму, используя CSS.Под этим я подразумеваю эту целевую форму:

Мне бы хотелось, чтобы фигура была одного сплошного цвета.Код ниже - это то, что я до сих пор управлял, он делает полукруг.

.circle::after {
  content: '';
  background-color: #22222A;
  min-height: 40px;
  min-width: 80px;
  width: 5vw;
  height: 2.5vw;
  border-bottom-left-radius: 90px;
  border-bottom-right-radius: 90px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

Answer 1

Вы можете сделать это, определив радиус границы относительно ширины и высоты элемента.Кроме того, вы скрываете границу сверху.

.parabola{
  width:200px; height:200px;  
  border:solid;
  border-color:transparent #000 #000 #000;
  border-radius: 0 0 100px 100px;
}

<div class="parabola"></div>

Просмотреть код ручки можно здесь: https://codepen.io/anon/pen/pOYjJO

Надеюсь, это поможет.

Answer 2

Вы можете сделать это любым способом

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

.circle{
  height : 200px;
  width : 300px;
  border : 1px solid red;
  border-radius : 50%;
}

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

  .circle{
  height : 300px;
  width : 200px;
  border : 1px solid red;
  border-radius : 50%;
}

Answer 3

На самом деле я не знаю, что именно вы ищете.

.circle {
    width: 200px;
    height: 100px;
    background-color: transparent;
    border-top-left-radius: 110px;
    border-top-right-radius: 110px;
    border: 10px solid gray;
    border-bottom: 0;
    transform:rotate(180deg);
}

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