How to position rotated divs to be perfectly flush against each other

Question

I've got two divs, one as a child of the other, and I'm trying to position the left side of .child to be perfectly flush against the right side of .parent, so that their borders create a smooth and continuous curve.

.turn {
  position: absolute;
  height: 40px;
  width: 40px;
  border: 10px solid black;
  -webkit-transform-origin: 100% 100%;
  -moz-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
  background: transparent;
}
.parent {
  top: 100px;
  left: 0px;
  border-right: none;
  border-bottom: none;
  border-radius: 100% 0 0 0;
  -webkit-transform: rotate(40deg);
  -moz-transform: rotate(40deg);
  transform: rotate(40deg);
}
.child {
  top: -50px;
  /* height+border of parent */
  left: 40px;
  /* width of parent */
  border-left: none;
  border-top: none;
  border-radius: 0 0 100% 0;
}

<div class="turn parent">
  <div class="turn child"></div>
</div>

Since .parent is rotated, however, when I set left of .child to be equal to width of .parent, there is still a tiny visible gap:

What I've tried so far to eliminate this gap is to set left of .child to be width - 1 of .parent (in this case, 39px instead of 40px) so the divs will slightly overlap. If the divs had no border-radius, this would work just fine. However, since the borders are curved, this slight overlap shows up as a slight bump or slight jaggedness. I know it's very minor, but it's significant for my purposes:

I am wondering if anyone has any better ideas of how I can get the borders to make a smooth and continuous curve?

Here's a working fiddle

Answer 1

you can use SVG for that

<svg width="20%" height="20%" viewBox="0 0 200 200">
  <g transform="translate(0.000000,200.000000) scale(0.100000,-0.100000)" fill="red" stroke="none">
    <path d="M510 1235 c-108 -24 -219 -86 -303 -168 -64 -62 -147 -169 -147 -188
0 -4 33 -36 73 -72 l73 -65 63 80 c116 145 228 206 360 195 93 -8 155 -32 340
-132 186 -101 297 -143 402 -151 208 -17 407 106 547 337 l22 36 -74 66 -73
67 -41 -58 c-156 -221 -322 -270 -547 -162 -44 22 -134 69 -200 105 -201 109
-351 143 -495 110z" />
  </g>
</svg>