Html 在Jumbotron顶部的中心添加一个半圆

我正试图实现这个设计有一个半圆与标志内的中心。请参考下面给出的链接

我尝试过用CSS制作一个半圆，但它不适合我想要的设计。我已经用了两个巨无霸，一个接一个。半圆应该覆盖两个jumbotron上的区域，如图所示（上面提到的链接）。 对于如何实现此设计，我们非常感谢您的帮助

HTML:

登录
创建帐户

CSS:

/*删除导航栏的默认圆角边框并增加底部边距*/
navbar先生{
边缘底部：50px；
边界半径：0；
}
/*删除jumbotron的默认底部边距*/
琼伯伦先生{
页边距底部：0；
背景色：#5a9f33；
填料：2米1米；
}
.其他颜色{
边缘底部；0；
背景色：#67b63d；
填料：2米1米；
}
.导航头{
显示：内联块；
宽度：100%；
}
.社交，.用户操作{
浮动：左；
}
.联系我们，.cart{
浮动：对；
}
.注册{
背景色：#67b63d；
利润率：0.50px 50 px；
填充：20px；
}
输入{
填充：15px；
利润率：20px；
宽度：85%；
}
.btn标志{
背景色：#67b63d；
字体系列：衬线；
颜色：白色；
边界半径：30px；
字号：2em；
填充：10px 50px；
保证金：20px自动；
显示：块；
}
.头衔{
字体系列：衬线；
字号：600；
颜色：#67b63d；
字号：3em；
边缘顶部：20px；
}
.div半圆{
背景：#9e978e；
显示：内联块；
利润率：0.1米1米0；
}
顶部
.底部{
高度：45px；
宽度：90px；
}
.顶{
边框左上半径：90px；
边框右上角半径：90px；
}

更新：

---

解决方案：如果有人想知道，请参考第一条评论中@bhv的示例，并根据您的要求进行调整。

首先，您发布的代码没有任何帮助……不过我会尝试给出一个实现链接图像的过程

不使用class.container创建div

在创建的分区上方创建2个导航

在同一div内的导航下方创建一个jumbotron，并将其包含在内 在带有类容器的div中

根据需要在这三个之间设置边距，以将它们组合在一起

可以清楚地看到，您不需要半圆。您需要椭圆使用

剪辑路径：椭圆（65px 30px，125px 40px）类似这样的内容，在同一个div中创建，然后使用css将其定位，并为其指定最高的z索引，使其呈现为最顶层

它能起作用的猎物！！；-）

---

您必须使用position:absolute来覆盖两个jumbotron 将以下代码行添加到此类：.div半圆

    position: absolute;
    top: 23%;
    left: 40%;

---

一个样本，而不是answer@bhv谢谢你，伙计。样品很有用。谢谢你的帮助。@bhv在第一条评论中提到的样本有助于获得所需的设计。是的，它是一个椭圆，不是半圆。谢谢你的批改。

<style>
        /* Remove the navbar's default rounded borders and increase the bottom margin */ 
        .navbar {
            margin-bottom: 50px;
            border-radius: 0;
        }

        /* Remove the jumbotron's default bottom margin */ 
        .jumbotron {
            margin-bottom: 0;
            background-color: #5a9f33;
            padding: 2em 1em;
        }
        .other-color {
            margin-bottom; 0; 
            background-color: #67b63d;
            padding: 2em 1em;
        }
        .navheader{
            display: inline-block; 
            width: 100%;
        }
        .social, .user-actions{
            float:left;
        }
        .contact-us, .cart{
            float:right;
        }
        .sign-up{
            background-color:#67b63d;
            margin: 0 50px 50px;
            padding:20px;
        }
        input{
            padding:15px;
            margin:20px;
            width:85%;
        }
        .btn-sign{
            background-color: #67b63d;
            font-family: serif;
            color: white;
            border-radius: 30px;
            font-size: 2em;
            padding: 10px 50px;
            margin: 20px auto;
            display: block;
        }
        .title{
            font-family: serif;
            font-weight: 600;
            color: #67b63d;
            font-size: 3em;
            margin-top:20px;
        }
        .div-semicircle {
            background: #9e978e;
            display: inline-block;
            margin: 0 1em 1em 0;
        }
        .top,
        .bottom {
            height: 45px;
            width: 90px;
        }
        .top {
            border-top-left-radius: 90px ;
            border-top-right-radius: 90px;
        }

    </style> 

    position: absolute;
    top: 23%;
    left: 40%;