Wie man CSS Trennzeichen Halbkreis macht?

-1

Ich habe Mockup wie diese Wie man CSS Trennzeichen Halbkreis macht?

Und ich versuche, diese

HTML

<section id="screens-three" class="clearfix"> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-md-12"> 
       <h1 class="maintitle text-center">Test</h1> 
      </div> 
     </div> 
    </div> 
</section> 

<section id="screens-four" class="clearfix"> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-md-12"> 
       <h2 class="maintitle">01Designs</h2> 
      </div> 
     </div> 
    </div> 
</section>

Das Problem hinzufügen in meinem Code? Wie mache ich ein Trennzeichen wie ein Bild oben?

Quelle

2016-03-23 rico.aka.jojo

Welche CSS haben Sie ausprobiert? – Xufox

Sie können nicht (da dies nicht wirklich Halbkreis ist, sondern ein halbes Oval). Verwende das Bild. –

Das Problem ist die runde Ecke links und rechts (was Bhojendra sagte). Aber so etwas wie ein einfacher Halbkreis [ist möglich] (http://stackoverflow.com/questions/18033468/how-to-add-a-half-circle-at-the-bottom-middle-of-my-header) . – Marvin

Sie können nicht genau wie Ihr Bild erstellen. Dazu müssen Sie das Trennzeichen mithilfe von Bild formatieren.

Für Halbkreis, können Sie verwenden:

.separator { 
 
    position: relative; 
 
    background: #000; 
 
    height: 50px; 
 
} 
 

 
.separator::before{ 
 
    width: 30px; 
 
    height: 15px; /* half of the width */ 
 
    border-bottom-left-radius: 15px; 
 
    /* play with the value like 10px 12px 
 
     to get something like your image */ 
 
    border-bottom-right-radius: 15px; 
 
    border-top: 0; 
 
    content: ""; 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 0px; /* use negative shift if you get something closer to image */ 
 
    background-color: #fff; 
 
}

<div class="separator"></div>

Quelle

2016-03-23 10:50:42

Sie können die Funktion 'transform'' scale' verwenden, um sie zu einem Oval zu machen. (Und Sie können 'transform: translateX (-50%);' verwenden, um es tatsächlich zu zentrieren.) – Xufox

Selbst dann konnte nicht so genau wie das Bild erstellt werden. –

HTML:

<div class="container"> 
<div class="absolute-div"> 

</div> 
<div class="first-div"> 
</div> 
<div class="second-div"> 
</div>

CSS:

.first-div 
{ 
    height:50px; 
    background-color:#666; 
} 
.second-div 
{ 
    height:100px; 
    background-color:#000; 
} 
.absolute-div{ 
    height:30px; 
    margin-left:50%; 
    position:absolute; 
    width:30px; 
    margin-top:40px; 
    background:#666; 
    border-radius:50px; 

} 
.container{ 
    position: relative; 
}

Hier ist die Fiddle.

Quelle

2016-03-23 11:13:21

Das sieht überhaupt nicht nach der gewünschten Form aus. – Xufox

@Xufox: Wahr. Aber das ist das Beste, was ich tun könnte. –

Wie man CSS Trennzeichen Halbkreis macht?

Antwort

Verwandte Themen