我想创建一个有倾斜背景的响应式网站，以便在两个背景之间进行过渡。使用三个不同的部分，第二部分具有旋转Angular 以产生倾斜过渡。但是当我调整窗口大小时，我们可以看到第2节的“坏”部分。

未调整大小的窗口：x1c 0d1x调整大小的窗口，我们可以看到右边的“坏”部分2

有没有办法让它响应？

.sec1 {
    height: 50vh;
    background-color: blue;
}

.sec2 {
    height: 20vh;
    width: 91.5%;
    background-color: red;
    transform: rotate(-4deg) scale(1.2, 1);
    margin: -4vw 0px -4vw 0px;  
}

.sec3 {
    height: 50vh;
    background-color: red;
}

<section class ="sec1">
    </section>

    
    <section class = "sec2">
    </section>
        
    <section class = "sec3">
    </section>

我试图隐藏“overflow-x”，它没有改变，而调整窗口大小。