CSS旋转divs 100％宽度

Question

我有一个堆叠div的设计，其中内部div将有各种偏斜和旋转。进行一些初步测试，从逻辑上讲，旋转的div会在边缘留下间隙，而不是100％冲洗。这是一个粗略的例子：

填补这些空白并使其紧密响应的最佳方法是什么？我最初的想法是添加其他倾斜的div来填充空格，但想知道是否有更好的方法？感谢。

Answer 1

如果没有工作代码示例，很难给出精确的建议，但一般情况下，您只需增加旋转元素的宽度，并可能将其向右或向左偏移，具体取决于您如何定位它

＆＃13;

＆＃13;

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);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;