How to create a responsive skew background

Question

I did a background Skew using pseudo-Elents but the red part is outside the margin of the page, as help to stay only inside the margin ?

        *{
            margin: 0;
            padding: 0;
        }
.content{
    background-color: chartreuse;
    width: 100%;
    height: 100vh;
}
.content::before{
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 30%;
    background-color: cornflowerblue;
    transform: skew(-10deg);
    transform-origin: top;
}
.content::after{
    content: '';
    position: absolute;
    right: -60px;
    top: 0;
    bottom: 0;
    width: 30%;
    background-color: #ff0000;
    transform-origin: top;
}

    <div class="content">
        <h1>NADA</h1>
    </div>

Answer 1

Face the problem is the right: -60px that you put in the pseudo element

To correct this one of the options is to discount 60px of width and not play the element 60px out of the screen with a right negative

For that use a calc, like your width is 30% Take 60px out of it, like this:

width: calc(30% - 60px);

See the result in the example below

      *{
            margin: 0;
            padding: 0;
        }
.content{
    background-color: chartreuse;
    width: 100%;
    height: 100vh;
}
.content::before{
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 30%;
    background-color: cornflowerblue;
    transform: skew(-10deg);
    transform-origin: top;
}
.content::after{
    content: '';
    position: absolute;
    right: 0px;
    top: 0;
    bottom: 0;
    width: calc(30% - 60px);
    background-color: #ff0000;
    transform-origin: top;
   
}

<div class="content">
    <h1>NADA</h1>
</div>