<分区>
html - 背景颜色旋转CSS
我正在尝试像下图那样旋转背景，但没有成功。这是 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> 
最佳答案
.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;
}<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>关于html - 背景颜色旋转CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41639146/