JSFiddle - React, Tailwind, and code Playground
HTML
<div class="example">
<div class="a_b">
<div class="b_s"></div>
</div>
<div class="a">
<div class="a1">
</div>
<div class="a2">
</div>
<div class="b1">
</div>
<div class="b2">
</div>
</div>
<div class="a_b">
<div class="b_s"></div>
</div>
</div>
CSS
.example {
height: 260px;
white-space:nowrap;
padding-right:400px;
}
.a_b{
display:inline-block;
background: green;
text-align: center;
width:50%;
white-space:normal;
margin-right:-5px;
}
.a{
white-space: normal;
display: inline-block;
float: left;
width: 126px;
height: 33px;
background-color: #aaaaaa;
}
.a_b{
float: left;
height: 33px;
background-color: #aaaaaa;
}
.b_s{
width: 100%;
height: 31px;
background-color: #fff;
}
.a1{
float: left;
background-color: #fff;
width: 50px;
height: 50px;
border-bottom-right-radius: 100% 100%;
border-bottom:10px solid #fff;
border-right:10px solid transparent;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin-top: -19px;
}
.a2{
margin-top: -5px;
float: left;
width: 50px;
height: 50px;
margin-left: -37px;//13-50
background-color: transparent;
border-top-left-radius: 100% 100%;
border-top:10px solid #fff;
border-left:10px solid transparent;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.b2{
float: left;
background-color: #fff;
width: 50px;
height: 50px;
border-bottom-left-radius: 100% 100%;
border-bottom:10px solid #fff;
border-left:10px solid transparent;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin-top: -19px;
margin-left: -37px;
}
.b1{
margin-top: -5px;
float: left;
width: 50px;
height: 50px;
margin-left: 0px; //+50
background-color: #fff;
border-top-right-radius: 100% 100%;
border-top:10px solid #fff;
border-right:10px solid transparent;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}