背景颜色旋转css

Question

我正在尝试像下面的图像一样旋转背景，但没有得到任何运气。这是css代码和HTML标记。如果我们用svg做类似的事情，它是更好的方法吗？

.diagonal-shadow::before, .diagonal-shadow::after {
  position: absolute;
  content: '';
  pointer-events: none;
}
.diagonal-shadow::before, .diagonal-shadow::after {
  top: 0px;
  left: 0%;
  z-index: -1;
  width: 100%;
  height: 35%;
  background: inherit;
  -webkit-transform: rotate(3deg);
  transform: rotate(3deg);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}
.diagonal-shadow::before {
  height: 14%;
  background: #333 !important;
  -webkit-transform: rotate(6deg);
  transform: rotate(6deg);
  -webkit-transform-origin: 3% 0;
  transform-origin: 70% 0;
}
.col{
  background:#f6f6f6;
  padding: 40px 20px;
}

<div class="diagonal-shadow">
<div class="col">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a viverra quam. Vestibulum maximus consequat porta. Duis aliquam ultrices semper. Suspendisse est orci, viverra eget ipsum et, ultricies bibendum nunc.</div>
</div>
</div>

Answer 1

＆＃13;

＆＃13;

.diagonal-shadow::before, .diagonal-shadow::after {
  position: absolute;
  content: '';
  pointer-events: none;
}
.diagonal-shadow::before, .diagonal-shadow::after {
  top: 0px;
  left: 0%;
  z-index: -1;
  width: 100%;
  height: 35%;
  background: inherit;
  -webkit-transform: rotate(3deg);
  transform: rotate(3deg);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}
.diagonal-shadow::before {
  height: 200px;
  background: #ccc !important;
  -webkit-transform: rotate(6deg);
  transform: rotate(3deg) scale(1.1);
}
.col{
  padding: 90px 20px;
}

＆＃13;

<div class="diagonal-shadow">
<div class="col">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a viverra quam. Vestibulum maximus consequat porta. Duis aliquam ultrices semper. Suspendisse est orci, viverra eget ipsum et, ultricies bibendum nunc.</div>
</div>
</div>

＆＃13;

＆＃13;

＆＃13;