如何在没有前后的情况下创建像半圆形这样的自定义形状？

Question

我正在尝试使用 div 创建一个形状，如下图所示

我尝试使用边框和框阴影来实现，但无法获得确切的形状。 起点的圆点不是问题，唯一的就是准确的弧线。

Answer 1

我认为这很相似，您可以使用height 和width 来达到所需的大小。

您还可以调整border-radius，最后两个值以获得您想要的确切形状 - 0% 0% 85% 85%。

如果它因为大小而与其他内容冲突，那么在其上使用 absolute 也可以解决该问题。

div {
   width: 480px;
   height: 300px;
   border-radius: 0% 0% 50% 50% / 0% 0% 85% 85%;
   border: 10px solid #000;
   border-top: 10px solid transparent;
   border-right: 10px solid transparent;
   border-left: 10px solid transparent;
}

<div></div>