CSSセパレータを半円にする方法は？

Question

私はこの

のようなモックアップがあると私は私のコード

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> 

問題でこれを追加しようとしていますか？上の画像のようにセパレータを作るには？

Answer 1

あなたの画像と全く同じように作成することはできません。このためには、imageを使用してセパレータのスタイルを設定する必要があります。

半円形の場合

、あなたが使用することができます。

.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>

Answer 2

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; 
} 

ここでは0です。