CSS Split ein reaktives Kreisdiv in Hälften

Question

Ich habe divs mit einer Grenze, die sie "Kreisform" aussehen lassen. Das letzte div sollte horizontal in Hälften mit unterschiedlichem Text aufgeteilt werden, dennoch sollte es ein Kreis sein.

Ich benutze Bootstrap und ich habe keine Ahnung, wie man die Hälfte des Kreises für ein Div und ein anderes Div im Responsive Design runden. Könnte mir jemand helfen? Danke vielmals! https://www.bootply.com/0ksNKnSjZT

mit fester Größe, so scheint es Half circle with CSS (border, outline only)

P. S. einfach zu sein Ich möchte, wenn möglich, kein Hintergrundbild verwenden.

Answer 1

Sie haben den Prozentwert in border-radius verwendet und Prozentwerte sind abhängig von den Elementen width und height und nimmt den Anteil der kleinen Dimension (d. Breite oder Höhe).

In Ihrem Fall (im dritten Kreis), die Höhe und Breite von .bublina nicht gleich, d. H. Höhe ist kleiner als Breite, deshalb border-radius:100% macht es nicht Kreis.

So haben Sie px Wert statt % Wert zu verwenden, hier wie:

.bublina.upper { 
    border-top-right-radius: 300px; 
    border-top-left-radius: 300px; 
    border-bottom-right-radius: 0; 
    border-bottom-left-radius: 0; 
} 

.bublina.lower { 
    border-top-right-radius: 0; 
    border-top-left-radius: 0; 
    border-bottom-right-radius: 300px; 
    border-bottom-left-radius: 300px; 
} 

Answer 2

Verwenden Sie zwei Kreise mit Wrapper, verwenden Sie overflow: hidden, um die Hälfte des Kreises im Wrapper zu verbergen. Zum runden Grenze zu haben, verwenden Sie border-radius: 50%

.wrapper { 
 
    position: relative; 
 
} 
 

 
.wrapper .circle:before { 
 
    content: ''; 
 
    width: 50px; 
 
    height: 50px; 
 
    position: absolute; 
 
    left: 0; 
 
    border: 3px solid blue; 
 
    display: block; 
 
    border-radius: 50%; 
 
} 
 

 
.wrapper .circle.top:before { 
 
    top: 0; 
 
} 
 

 
.wrapper .circle.bottom:before { 
 
    bottom: 0; 
 
    border-color: red; 
 
} 
 

 
.wrapper .circle { 
 
    height: 28px; 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 

 
.wrapper span { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 15px; 
 
}

<div class="wrapper"> 
 
    <span>My Text</span> 
 
    <div class="circle top"></div> 
 
    <div class="circle bottom"></div> 
 
</div>

Answer 3

können Sie versuchen, mit px statt %

.bublina.lower { 
    border-top-right-radius: 0; 
    border-top-left-radius: 0; 
    border-bottom-right-radius: 150px; 
    border-bottom-left-radius: 150px; 
} 

.bublina.upper { 
    border-top-right-radius: 150px; 
    border-top-left-radius: 150px; 
    border-bottom-right-radius: 0; 
    border-bottom-left-radius: 0; 
} 

Answer 4

Mit dieser Methode müssen Sie nur die Breiten- und Höhenwerte ändern in .circle_holder css, der Rest wird an Ort und Stelle fallen, (Ein Breite Wert kleiner als die Breite des Textes würde komisch aussehen)

.top_circle { 
 
    border-top-left-radius: 10000px; 
 
    border-top-right-radius: 10000px; 
 
    border-top:1px solid gray; 
 
    border-left:1px solid gray; 
 
    border-right:1px solid gray; 
 
    height:50%; 
 
    position:relative; 
 
} 
 

 
.top_circle div { 
 
    text-align:center; 
 
    vertical-align:bottom; 
 
    position:absolute; 
 
    bottom:-7.5px; 
 
    width:100%; 
 
} 
 

 
.bottom_circle { 
 
    border-bottom-left-radius: 10000px; 
 
    border-bottom-right-radius: 10000px; 
 
    border-bottom:1px solid gray; 
 
    border-left:1px solid gray; 
 
    border-right:1px solid gray; 
 
    height:50%; 
 
} 
 

 
.circle_holder { 
 
    position:relative; 
 
    width:123px; 
 
    height:123px; 
 
    padding:0px; 
 
}

<div class="circle_holder"> 
 
    <div class="top_circle"><div>Sometext</div></div> 
 
    <div class="bottom_circle"></div> 
 
</div>