如何定位旋轉的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以完全相互對齊

回答

相關問題