div侧面的对角线边框

Question

我试图在旁边创建两个div,旁边有对角线边框.

我做了一个非常粗略的布局.

我已经提出了一个想法:https://jsfiddle.net/4vnankfj/1/.

.container {
  overflow: hidden;
  background: #eee;
  padding: 20px;
}
.left,
.right {
  width: 50%;
  float: left;
}
.right {
  transform: rotate(10deg);
  background: orange;
}
.right p {
  transform: rotate(-10deg);
  padding: 0 20px;
}

<div class="container">
  <div class="left">
    <p>
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
    </p>
  </div>
  <div class="right">
    <p>
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
    </p>
  </div>
</div>

目前我的问题是右侧覆盖左侧.左侧的文字应适应对角线边框.此外,我希望右侧完全是橙色.

是否有可能实现这一目标？