背景色rotate 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

.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>