思路：
草图
效果如下：
效果图
参考：https://www.1st-river.com/ （拉到底部）
控制台代码
html代码：
<div class="rno-2-section-breach-radius">
<div class="l"></div>
<div class="r"></div>
</div>
less代码：
// ==========start=========
.rno-2-section-breach-radius {
position: absolute;
left: 50%;
top: 100%;
z-index: 0;
height: 20px;
width: 320px;
max-width: 50%;
background-color: #fff;
transform: translateX(-50%);
overflow: hidden;
> div {
width: 40px;
height: 10px;
background-color: #000;
position: absolute;
display: inline-block;
bottom: 0;
&::before,
&::after {
content: "";
width: 50px;
height: 50px;
position: absolute;
left: 0;
top: 0;
border-radius: 50px;
}
&::before {
background-color: #282828;
top: -10px;
}
&::after {
background-color: #fff;
top: -40px;
}
&.l {
left: 0;
&::before {
left: -25px;
}
&::after {
left: 15px;
}
}
&.r {
right: 0;
&::before {
left: 15px;
}
&::after {
left: -25px;
}
}
}
}
// ==========end=========
