div侧面的对角线边框

Question

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

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

I have been trying a much harder way to accomplish the same

我已经提出了一个想法：。

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

有可能实现吗？