偏りの事業部 - 右サイドのみ

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>