перекос Див - Правая сторона Только

Question

Я пытаюсь создать DIV, как показано ниже:

Что лучший способом идти об этом. Прошу прощения за недостаток кода, но я думаю, что все, что я пробовал, ошибочно. Я пробовал вращать div, но вся левая сторона должна оставаться под прямым углом.

Возможно ли это?

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>