Html 如何定位旋转div，使其彼此完全平齐

我有两个

div

s，一个作为另一个的子对象，我正试图将

.child

的左侧定位为与

.parent

的右侧完全齐平，以便它们的边界创建一条平滑连续的曲线

。转身{
位置：绝对位置；
高度：40px；
宽度：40px；
边框：10px纯黑；
-webkit转换来源：100%100%；
-moz变换原点：100%100%；
变换原点：100%100%；
背景：透明；
}
.家长{
顶部：100px；
左：0px；
边界权：无；
边框底部：无；
边界半径：100%0；
-webkit变换：旋转（40度）；
-moz变换：旋转（40度）；
变换：旋转（40度）；
}
.孩子{
顶部：-50px；
/*父对象的高度+边框*/
左：40px；
/*母带宽度*/
左边界：无；
边界顶部：无；
边界半径：0 100%0；
}

---

您可以使用

SVG

实现这一点

似乎与边界半径有关，因为当我关闭边界半径时，间隙消失。是的，我想你是对的，

svg

是正确的选择，感谢你的想法和示例。对于我正在制作的东西来说，这将是一条非常奇特的

路径

：