CSS jigsaw piece creation - html

Question

I wanted to create the jigsaw pieces stitched together but not able to achieve the exact shape like below
Currently, I am struck with the below code but not able to achieve the shape
The HTML and CSS code and achieved the design provided below.
<div class="row " style="margin: 0px 5px;">
<div class="col-md bg-color-1">
<p>Some text goes here</p>
</div>
<div class="col-md bg-color-2">
<div class="puzzle"></div>
<p>Some text goes there</p>
</div>
</div>
#CSS
.puzzle {
position: absolute;
left: -27px;
top: 50%;
transform: translateY(-50%);
width: 30px;
height: 40px;
background-color: rgba(255,55,55,.25);
border-top-left-radius: 99px;
border-bottom-left-radius: 99px;
border-top-right-radius: 70px;
border-bottom-right-radius: 70px;
border-left: 3px solid #ff3737;
border-top: 3px solid #ff3737;
border-bottom: 3px solid #ff3737;
}
.bg-color-2 {
background-color: rgba(255,55,55,.25);
border-top: 2px solid #ff3737;
border-right: 2px solid #ff3737;
border-bottom: 2px solid #ff3737;
padding: 15px;
min-height: 250px;
}
.bg-color-2 {
background-color: rgba(255,55,55,.25);
border-top: 2px solid #ff3737;
border-right: 2px solid #ff3737;
border-bottom: 2px solid #ff3737;
padding: 15px;
min-height: 250px;
}
How to get rid of the line at the verge of the two pieces and also getting the curves in the junction?
Any help is appreciated.

Answer 1

Your code didn't for me well so I just quickly created this code.
If you see I created one class called .circle and just add the z-index: -1;
So basically there are two boxes in your code and if you just adjust z-index you'll get the output. Make sure that the left side box has the higher number of z-index and circle has little lower than left box and the right box ( purple in your case) goes low so it has lowest z-index number.
.container {
display: flex;
position: relative;
}
.half-circle {
z-index: -1;
position: absolute;
top: 50%;
transform: translatey(-50%);
height: 50px;
width: 50px;
background-color: pink;
border-radius: 50%;
}
.box {
margin-left: 5%;
height: 200px;
width: 200px;
background: pink;
}
<div class="container">
<div class="half-circle"></div>
<div class="box"></div>
</div>
Let me know if it doesn't work for you.