Overlapping rounded edge boxes
HTML
<div class="bar">
<div class="box-wrap container d-flex">
<div class="box box-one">
<div class="circle">
<svg viewBox="0 0 100 100">
<circle cx="50" cy="50" r="20" fill="green"></circle>
</svg>
</div>
<div class="text">
Test Test Test Test Test
</div>
</div>
<div class="box box-two">
<div class="circle">
<svg viewBox="0 0 100 100">
<circle cx="50" cy="50" r="20" fill="green"></circle>
</svg>
</div>
<div class="text">
Test Test Test Test Test
</div>
</div>
</div>
</div>
CSS
.bar {
background-color: #ddd;
}
.box-wrap {
display: flex;
justify-content: center;
background-color: #ddd;
}
.box {
font-size: 3em;
position: relative;
display: flex;
align-items: center;
justify-content: flex-start;
}
.box .circle {
position: absolute;
top: 0;
right: 0;
height: 100%;
width: auto;
z-index: 0;
background-color: #eee;
border-radius: 0 50% 50% 0;
}
.box .circle svg {
height: 100%;
width: auto;
}
.box .text {
z-index: 1;
display: flex;
height: 100%;
background-color: #eee;
margin-right: 200px;
min-height: 200px;
padding: 25px;
margin-right: 159px;
align-items: center;
padding-left: 150px;
font-size: 2rem;
}
.box-one {
z-index: 100;
}
.box-one .circle {
background-color: #ddd;
}
.box-one .text {
background-color: #ddd;
}
.box-two {
margin-left: -110px;
}
