如何定位旋转的div以完全相互对齐

我有两个div s，其中一个作为另一个的孩子，我试图将.child的左侧定位为与右侧完全齐平一边.parent，以便他们的边界创建一个平滑和连续的曲线。如何定位旋转的div以完全相互对齐

.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转动，然而，当我设置的.childleft为等于的.parentwidth，仍然存在一个微小的可见间隙：

到目前为止，我试图消除这种差距的是设置left的.child为width - 1的.parent（在这种情况下，39px而不是40px），因此div会稍微重叠。如果div s没有border-radius，这将工作得很好。然而，由于border是弯曲的，这种轻微的重叠显示为轻微的凹凸或轻微的锯齿。我知道这是非常小的，但它是显著为我的目的：

我想知道如果任何人有我如何能得到border s到确保平稳和连续的曲线更好的想法？

这里的工作fiddle

来源

2016-05-09 digglemister

看来，因为当我打开边界半径关闭间隙消失被束缚圆角半径。 – haltersweb

您可以使用SVG为

<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>

来源

2016-05-09 22:12:11 dippas

是的，我认为你是对的，'svg'是要走的路，感谢这个想法和例子。这将是需要成为一个真正的花哨的'路径'为我所做的：https://jsfiddle.net/18wf27hw/32/ – digglemister

如何定位旋转的div以完全相互对齐

回答

相关问题