snookieordie snookieordie - 7 months ago 13
HTML Question

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

I've got two

div
s, 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:

enter image description here

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
div
s will slightly overlap. If the
div
s had no
border-radius
, this would work just fine. However, since the
border
s are curved, this slight overlap shows up as a slight bump or slight jaggedness. I know it's very minor, but for my purposes it is significant:

enter image description here

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

Here's a working fiddle

Answer

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>