html - 倾斜的 Div - 仅右侧

Question

我正在尝试创建一个如下所示的 div:

最好的方法是什么。对于缺少代码，我深表歉意，但我认为我尝试的所有内容都是错误的。我试过旋转一个 div，但整个左侧需要保持直 Angular 。

这可能吗？

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>