Skewed Div - rechte Seite nur

Question

Ich versuche, ein div wie die unten zu erstellen:

Was geht über den besten Weg. Es tut mir leid für den Mangel an Code, aber ich denke, alles, was ich versucht habe, ist falsch. Ich habe versucht, ein Div zu drehen, aber die gesamte linke Seite muss in einem geraden Winkel bleiben.

Ist das möglich?

Answer 1

.normal { 
 
    background: gray; 
 
     height: 200px; 
 
    width: 50%; 
 
    position: relative; 
 
    padding: 20px; 
 
} 
 

 
.slanted { 
 
    background: skyblue; 
 
    box-sizing: border-box; 
 
    border-radius:20px; 
 
    height: 200px; 
 
    width: 90%; 
 
    position: absolute; 
 
    padding: 20px; 
 
     transform: skewY(4deg); 
 

 
}

<div class="normal"> 
 
<div class="slanted"> 
 
    <h2>Hello World!</h2> 
 
    <p>This was you are trying to get i Hope</p> 
 
</div> 
 
    <div>