How would I make a subtle curved line divider between two images? - html

Question

As such: https://i.stack.imgur.com/UdHNE.png
CSS border, clip path, etc?
I've tried the following:
div#box{
width: 38px;
height: 500px;
border: 13px solid black;
border-color: transparent black transparent transparent;
border-radius: 0 100% 100% 0;
}
<div id="box"></div>
But it's not giving me the result I'm looking for (the curve is too subtle).
I've also tried using clip path but the transparent element won't "cut" into the other one obviously since it's transparent.
body {
background-color: lightblue;
}
.one {
height: 500px;
width: 38px;
background-color: white;
clip-path: ellipse(38px 50% at 0% 50%);
position: absolute;
right: 50%;
top: 0;
}
.two {
height: 500px;
width: 38px;
background-color: transparent;
clip-path: ellipse(38px 50% at 0% 50%);
position: absolute;
right: calc(50% + 13px);
top: 0;
}
<div class="one"></div>
<div class="two"></div>
Any help would be greatly appreciated.

Answer 1

Can you please try this and only play with second[180%] and third[-2%] value.
In here we create a required clip-path than we create another div which will create us a middle space and aplly position: absolute ,overflow:hidden to create same clip-path in red div and than we set background-color of middle div as same as screens background-color.
z-index are need to be .one > .middle > .two
clip-path: ellipse(100% 180% at -2% 50% )
body {
position: relative;
min-height: 100vh;
display: flex;
place-items: center;
background-color: bisque;
}
.one{
position: relative;
height: 500px;
width: 500px;
background-color: green;
clip-path: ellipse(100% 180% at -2% 50% ) ;
z-index: 3;
}
.middle{
position: absolute;
z-index: 2;
height: 500px;
width: 500px;
clip-path: ellipse(100% 180% at -2% 50% ) ;
left:25px;
overflow: hidden;
background-color: bisque;
}
.two{
position: relative;
z-index: 1;
right:25px;
height: 500px;
width: 500px;
background-color: red;
}
<div class="one"></div>
<div class="middle"></div>
<div class="two"></div>