抛物线形状的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

实际上我不知道您到底在寻找什么。

.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>

Answer 2

您可以通过相对于元素的宽度和高度定义边界半径来实现。此外，您将边框隐藏在顶部。

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

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

在此处查看codepen： https://codepen.io/anon/pen/pOYjJO

希望这会有所帮助。

Answer 3

您可以通过任何一种方式实现它

 <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%;
}