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

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>

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

how to create a custom shape like half circle without before after?

css

css-shapes