div上的弯曲底部

【问题标题】：Curved bottom on divdiv上的弯曲底部
【发布时间】：2017-04-25 20:35:43
【问题描述】：

我有一个 div，我想要一个弯曲的底部边框。与图像相似，但不在顶部。我试过使用border-radius，但它似乎没有创建一个弯曲的底部。知道如何在不使用背景图像的情况下做到这一点。

【问题讨论】：

你能分享一下你目前尝试过的代码吗？

标签： css

【解决方案1】：

您可以为不同角落的边界半径组合两个值，如下面的 sn-p 所示：

.x {
width: 240px;
height: 120px;
background: #fa0;
border-bottom-left-radius: 120px 40px;
border-bottom-right-radius: 120px 40px;

}

&lt;div class="x"&gt;&lt;/div&gt;

【讨论】：

【解决方案2】：

您正在搜索类似的内容？

#tv {
  position: relative;
  width: 200px;
  height: 150px;
  margin: 20px 0;
  background: red;
  border-bottom-left-radius: 100px 40px;
  border-bottom-right-radius: 100px 40px;
}

&lt;div id="tv"&gt;&lt;/div&gt;

【讨论】：

【解决方案3】：

是的，创建两个div 怎么样，一个在另一个里面，然后你像这样设置它们：

<style>
    .outer{
        width:1000px;
        height:100px;
        border-radius:100%;
    }
    .inner{
        width:100px;
        height:100px;
        background:gold;
        overflow:hidden;
    }
</style>

<div class="outer">
    <div class="inner"></div>
</div>

你明白了吗？

【讨论】：