CSS旋轉divs 100％寬度

Question

我有一個設計與堆疊的divs，其中內部divs會有各種偏斜和旋轉。做一些初步測試，非常合理地旋轉的div在邊緣留下空白，而不是100％地齊平。這裏有一個簡單的例子：

填補這些空白並讓他們作出緊密反應的最好方法是什麼？我最初的想法是添加其他歪斜的div來填充空格，但想知道是否有更好的方法？謝謝。

Answer 1

沒有工作代碼示例，很難給出精確的建議，但通常情況下，您只需增加旋轉元素的寬度，並可能將其偏移到右側或左側，具體取決於您如何定位它。

div { 
 
    background: black; 
 
    height: 100px; width: 100px; 
 
    position: relative; 
 
    margin: auto; 
 
    overflow: hidden; 
 
} 
 

 
span { 
 
    display: block; 
 
    background: green; 
 
    height: 10px; 
 
    width: 150%; 
 
    position: absolute; 
 
    top: 50%; left: -25%; 
 
    transform: rotate(20deg); 
 
}

<div> 
 
    <span></span> 
 
</div>