css - 删除由使用边框半径引起的空白

Question

我有两个由“border-top-left-radius: 500px 20px;”分隔的 div 元素和“border-top-right-radius: 500px 20px;”。我的问题是用前一个 div 元素的颜色填充由该半径引起的空白。 Here is a picture of my problem.如您所见，两个 div 之间的 Angular 落有空白区域，我需要用上部 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;