兩個背景水平在div一個圓角div

Question

我有一個小問題，使邊界半徑的一個div中的兩個水平背景。我想要主div是一個圓圈。

我的代碼

body{ 
 
    text-align: center; 
 
} 
 
.split-outer { 
 
    position: relative; 
 
    display: inline-block; 
 
    width: 200px; 
 
    height: 200px; 
 
    z-index: 2; 
 
    background: #014495; 
 
    border-radius: 100%; 
 
} 
 
    .split-outer::after{ 
 
    content: ""; 
 
    position: absolute; 
 
    left: 0; 
 
    bottom: 0; 
 
    width: 100%; 
 
    height: 50%; 
 
    z-index: -1; 
 
    background: #fff; 
 
    border-bottom-right-radius: 200px; 
 
    border-bottom-left-radius: 200px; 
 
    } 
 

 
.split-inner{ 
 
    width: 200px; 
 
    height: 200px; 
 
    margin: 0 auto; 
 
    color: #fff; 
 
    text-align: center; 
 
} 
 

 
span{ 
 
    display: block; 
 
} 
 

 
    span.split-title{ 
 
    padding: 30px 0 10px 0; 
 
    font-size: 55px; 
 
    text-align: center; 
 
    line-height: 55px; 
 
} 
 

 
    span.split-content{ 
 
    padding: 20px 0; 
 
    font-size:18px; 
 
    color: #014495; 
 
    }

<div class="container-fliud"> 
 
    <div class="jumbotron"> 
 
     <div class="split-outer"> 
 
      <div class="split-inner"> 
 
       <span class="split-title">100</span> 
 
       <span class="split-content">Lorem ipsum</span> 
 
       <button type="button" class="btn btn-primary btn-sm">Button</button> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

但我有一個小bug，在元素後，我看到的第一個div一些藍色的底色線。它看起來像是從半徑生成的邊界線。但我喜歡乾淨的白色圓形背景。

Codepen一條：http://codepen.io/michal_t/pen/KdoZYz/

Answer 1

您可以通過從.split-outer中刪除背景顏色，然後使用：before僞代碼來創建背景的上半部分，類似於如何使用after僞代碼創建下半部分。

.split-outer:before { 
    content: ""; 
    position: absolute; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 50%; 
    z-index: -1; 
    background: #014495; 
    background-image: initial; 
    background-position-x: initial; 
    background-position-y: initial; 
    background-size: initial; 
    background-repeat-x: initial; 
    background-repeat-y: initial; 
    background-attachment: initial; 
    background-origin: initial; 
    background-clip: initial; 
    background-color: #014495; 
    border-top-right-radius: 200px; 
    border-top-left-radius: 200px; 
} 

http://codepen.io/anon/pen/dYmdva

Answer 2

把border: 2px solid white在:after。

這裏是CSS代碼：

body { 
    text-align: center; 
} 
.split-outer { 
    position: relative; 
    display: inline-block; 
    width: 200px; 
    height: 200px; 
    z-index: 2; 
    background: #014495; 
    border-radius: 100%; 
} 
.split-outer::after { 
    content: ""; 
    position: absolute; 
    left: -2px; 
    bottom: -1px; 
    width: 100%; 
    height: 50%; 
    z-index: -1; 
    background: #fff; 
    border-bottom-right-radius: 200px; 
    border-bottom-left-radius: 200px; 
    border: 2px solid white; 
} 
.split-inner { 
    width: 200px; 
    height: 200px; 
    margin: 0 auto; 
    color: #fff; 
    text-align: center; 
} 
span { 
    display: block; 
} 
span.split-title { 
    padding: 30px 0 10px 0; 
    font-size: 55px; 
    text-align: center; 
    line-height: 55px; 
} 
span.split-content { 
    padding: 20px 0; 
    font-size: 18px; 
    color: #014495; 
} 

這裏是fiddle。