Ajout d'un demi-cercle au centre sur le dessus de Jumbotron

Question

J'essaie d'obtenir ce design ayant un demi-cercle avec le logo à l'intérieur au centre. Veuillez vous référer au lien ci-dessous.

Image

J'ai essayé de faire un demi-cercle en utilisant le CSS, mais il ne sera pas adapté à la conception que je veux. J'ai utilisé 2 jumbotrons, l'un après l'autre. Le demi-cercle doit couvrir la zone sur les deux jumbotron comme sur l'image (lien mentionné ci-dessus). Toute aide est appréciée sur comment puis-je réaliser cette conception.

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> 

MISE À JOUR: Solution: En cas où quelqu'un veut savoir, reportez-vous à l'échantillon par @bhv dans le premier commentaire pour référence et tweak selon votre condition.

Answer 1

d'abord votre code n'est pas de affiché le toute aide .... encore que je vais essayer de donner une procédure comment vous pouvez obtenir l'image liée

1. créer un div pas avec classe .container

2. créer 2 navs intérieur au-dessus créé div

3. créer un jumbotron en dessous des valeurs liquidatives à l'intérieur du même div et contiennent dans un div avec classe conteneurs
4. marges définies comme vous en avez besoin entre ces 3 pour les réunir
5. Il est clairement visible que vous ne avez pas besoin d'un demi-cercle .. vous avez besoin d'une ellipse utiliserclip-path: ellipse(65px 30px at 125px 40px); someting comme celui-ci pour créer Au sein même div puis placez-le d'une manière que vous voulez utiliser css et lui donner le z-index le plus élevé de sorte qu'il rend le plus haut niveau.
6. proie que cela fonctionne !! ;-)

Answer 2

vous devez utiliser position: absolute pour couvrir les deux jumbotron ajouter ces lignes de code à cette classe: .div-demi-cercle.

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