html - 抛物线形状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%);
}

标签： htmlcss

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

希望这可以帮助。