Diagonal Borders on side of div

Question

I am trying to create two divs right next to each other with diagonal borders on the side.

I made a very rough layout.

I already came up with an idea: 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>

Currently my problems are that the right side covers the left side. The text on the left should adapt to the diagonal border. Furthermore I want the right side to be completely orange.

Is it possible to achieve that ?