如何将旋转的div放置成彼此完全齐平

Question

我有两个div s，一个是另一个孩子，我试图将.child的左侧与{{{}}的右侧完全齐平。 1}}，使它们的边界形成平滑连续的曲线。

.parent

.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>轮换后，当我将.parent的{​​{1}}设置为等于left的{​​{1}}时，仍有一点点可见间隙：

到目前为止，我尝试消除这种差距的方法是将.child的{​​{1}}设置为width的{​​{1}}（在这种情况下，.parent而不是left）所以.child s会略微重叠。如果width - 1没有.parent，这样就可以了。但是，由于39px是弯曲的，这种轻微的重叠表现为轻微的隆起或轻微的锯齿状。我知道它很小，但对我的目的来说很重要：

我想知道是否有人对如何让40px得到平滑连续的曲线有更好的想法？

这是一个有效的fiddle

Answer 1

您可以{/ 1}}使用

SVG