在div上弯曲的底部

Question

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

Answer 1

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

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

}

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