如何制作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

您无法完全按照图像创建。为此，您需要使用图像设置分隔符的样式。

对于半圈，您可以使用：

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

这是Fiddle。