在巨型屏幕顶部的中心添加一个半圆

Question

我正在尝试实现这种设计，在中心有一个带有徽标的半圆形。请参考下面给出的链接。

图像

我尝试使用CSS制作半圆，但它不适合我想要的设计。我已经用了 2 个巨型机器人，一个接一个。半圆应覆盖两个巨型屏幕上的区域，如图所示(上面提到的链接(。 对于如何实现此设计的任何帮助，我们将不胜感激。

.HTML：

<div class="jumbotron">
<div class="container navheader">
<div class="social">
<a href=""><i class="fa fa-facebook " aria-hidden="true"></i></a>
<a href=""><i class="fa fa-google-plus " aria-hidden="true"></i></a>
<a href=""><i class="fa fa-instagram " aria-hidden="true"></i></a>
</div>
<div class="contact-us">
<a href="">
<i class="fa fa-phone " aria-hidden="true">&nbsp;
<label class="icon-label">CALL 0417 949 773</label></i></a>
</div>
</div>
</div>
<div class="jumbotron other-color">
<div class="container navheader">
<div class="user-actions">
<button class="btn btn-link" data-toggle="modal" data-
target="#sign-in">
<i class="fa fa-lock" aria-hidden="true">&nbsp;
<label class="icon-label">SIGN IN</label>
</i>
</button>
<button class="btn btn-link" data-toggle="modal" data-
target="#sign-up">
<i class="fa fa-user " aria-hidden="true">&nbsp;
<label class="icon-label">CREATE AN ACCOUNT</label>
</i>
</button>
</div>
<div class="div-semicircle top"></div>
<div class="cart">
<a href=""><i class="fa fa-shopping-cart " aria-
hidden="true">&nbsp;
<label class="icon-label">2 ITEM(S)</label>
</i></a>
</div>
</div>
</div> 

.CSS：

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

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

Answer 1

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

1. 创建一个不使用类 .container 的div

2. 在上面创建的div中创建2个导航

3. 在同一div内的导航下方创建一个巨型机器人并包含它 在带有类容器的div中
4. 根据需要在这 3 个之间设置边距以将它们组合在一起
5. 很明显，你不需要半圆。您需要使用椭圆clip-path: ellipse(65px 30px at 125px 40px);这样的东西在同一个div中创建它，然后以你想要使用css的方式定位它，并给它最高的z-index，以便它呈现为最顶层。
6. 猎物它有效！！ ;-(

Answer 2

你必须使用position：absolute 来覆盖两个巨型 将这些代码行添加到此类中：.div-semicircle。

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