歪斜的Div - 仅限右侧

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>