如何用边界半径制作这个形状？ [复制]答案

【问题标题】：How to make this shape with border radius? [duplicate]如何用边界半径制作这个形状？ [复制]
【发布时间】：2022-11-02 20:05:43
【问题描述】：

我无法使用边界半径重现此形状：

现在我得到这个：

这是我的 css 代码（它在网格内）：

 .container-11-1 {
    grid-column: 1;
    grid-row: 1 / 3;
    background: #e4cab6;
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
    margin-bottom: 30px; //otherwise the bottom stick to the section below and it's even worse
}

【问题讨论】：

您能否也向我们展示您的 html 并从中制作一个有效的 code-sn-p ？
请出示您的 HTML。问题可能出自grid-row: 1 / 3
您的 50% 是对象尺寸，因此您需要简单地调整比率以适应对象大小比率。

标签： css

【解决方案1】：

您可以将百分比更改为像素或 rem 或其他单位。看看这是否符合您的要求 - https://codepen.io/alstonchan/pen/eYevKZq。

border-bottom-left-radius: 10rem;
border-bottom-right-radius: 10rem;
/*or*/
border-bottom-left-radius: 160px;
border-bottom-right-radius: 160px;

【讨论】：

【解决方案2】：

我已经为你做了，从例子中检查。另外，这里来自codepen，它给了你一个想法。

.container-11-1 {
    width: 100%;
    height: calc(100vw - 300px);  /* Calculate `px` as you want*/
    grid-column: 1;
    grid-row: 1 / 3;
    background: #e4cab6;
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
    margin: auto;
}
.body{
  width: 100%;
}

<body>
  <div class="container-11-1"></div>
</body>

【讨论】：

此输出看起来不像 OP 试图实现的目标
@Martin，我在这里给出一个想法，如果我将宽度减少 50% 并增加高度，那么它看起来会很相似，您可以从 codepen.io/raajkhan/pen/LYOWrRR 此处查看
@MeherUllahKhanRaj 所以在你的 sn-p 中应用它。这个更好。
嘿，@ArmanEbrahimi，我已经添加了 Stackoverflow 默认代码 sn-p，正如你所说，我也会编辑我的答案。感谢您的建议。 ?
你好。我认为设置height: 100vw 是正确的。