在div上弯曲的底部

Question

我有一个div，我希望有一个弯曲的底部边框。与图像类似但不在顶部。我尝试过使用border-radius，但它似乎没有创建一个弯曲的底部。不知道如何在不使用背景图像的情况下执行此操作。

Answer 1

您可以为不同角落的border-radius组合两个值，如下面的代码段所示：

＆＃13;

＆＃13;

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

}

＆＃13;

<div class="x"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您正在搜索类似的内容吗？

＆＃13;

＆＃13;

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

＆＃13;

<div id="tv"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 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>

你明白了，对吧？