在Jumbotron頂部添加一個半圓形

Question

我想要實現這種設計，在中心內部有一個帶有徽標的半圓形。請參閱下面的鏈接。

Image

我曾嘗試使用CSS製作一個半圓，但它不適合我想要的設計。我一個接一個地使用了兩個jumbotron。半圓形應該像圖像一樣覆蓋雙臂上的區域（上面提到的鏈接）。 我怎樣才能達到這個設計，我會感謝任何幫助。

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> 

UPDATE： 解決方案：如果有人想知道，在第一個意見參考樣本由@bhv參考並按照您的要求調整它。

Answer 1

首先你所有張貼的代碼是不是有幫助....我仍然會盡力給一個程序如何可以實現鏈接的圖像

1. 創建一個div 不帶班.container

2. 創建2倍的NAV內部上面創建的div

3. 創建內部同一div的資產淨值低於超大屏幕和包含它 在DIV與類容器
4. 集利潤率則需要這3間它把他們聚在一起
5. 是你不需要它是清晰可見的半圓 .. 你需要一個橢圓使用clip-path: ellipse(65px 30px at 125px 40px);成才這樣來創建它在相同的div中，然後按照您希望使用css的方式進行定位，併爲其指定最高的z-index，以使其呈現爲最頂層。
6. 它的工作！ ;-)

Answer 2

必須使用的位置是：絕對的既包括超大屏幕 添加幾行代碼到這個類：.div-半圓。

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