html - CSS 旋转 div 100% 宽度

Question

我有一个带有堆叠 div 的设计，其中内部 div 会有各种倾斜和旋转。做一些初始测试，很合逻辑，旋转的 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>