<div class="contents">
    <div class="contents1">
        <p>コンテンツ1</p>
    </div>
    <div class="contents2">
        <p>コンテンツ2</p>
    </div>
    <div class="contents3">
        <p>コンテンツ3</p>
    </div>
</div>
.contents {
    background-color: #FFD500;
}
.contents1 {
    color: #000;
    padding: 60px 30px;
}
.contents2 {
    color: #FFD500;
    padding: 60px 30px;
    position: relative;
    z-index: 0;
}
.contents2::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-color: #000;
    transform: skewY(-5deg);
    transform-origin: top left;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
}
.contents3 {
    color: #000;
    padding: 60px 30px;
}

External CSS

  1. https://cdn.jsdelivr.net/npm/destyle.css@1.0.15/destyle.css

External JavaScript

This Pen doesn't use any external JavaScript resources.