Question

我有两个div元素，以“ border-top-left-radius：500px 20px;”分隔。和“ border-top-right-radius：500px 20px;”。我的问题是用上一个div元素的颜色填充由该半径引起的空白。 Here is a picture of my problem.如您所见，在两个div之间的角落有空白，我需要用上div的灰色填充。

.upper {
    background-color: grey;
    overflow:hidden;
}

.downer {
    border-top-left-radius: 500px 20px;
    border-top-right-radius: 500px 20px;
    border-bottom: none;
    border-left: none;
    border-right: none;
}

Answer 1

我通过在第二个div中添加重叠方法position: relative;和bottom: 18px;解决了我的问题。因此，第二个div的CSS代码如下所示

.downer {
   position: relative;
   bottom: 18px;
   border-top-left-radius: 500px 20px;
   border-top-right-radius: 500px 20px;
   border-bottom: none;
   border-left: none;
   border-right: none;

}

Answer 2

您需要将上颜色和下颜色的父级的背景颜色设置为灰色，将下颜色的父级的背景颜色设置为白色

删除因使用边框半径而引起的空白

2 个答案: