CSS background diagonal on one side

Question

I would like to create a diagonal cut only on the right side but couldn't get it going. Please help:

JSFIDDLE DEMO: https://jsfiddle.net/uv8tpeLs/1/

HTML:

<div class="header">
<div class="container">
  <div class="row">
    <div class="col">
      <div class="header__bg">
        <h1>hey this is the best there is today. hey this is the best there is today.</h1>
      </div>
    </div>
    <div class="col">
      <div class="header__text">
      </div>
    </div>
  </div>
</div>
</div>

CSS:

.header {
    position: relative;
  height: 300px;
}
.header__bg {
    position: absolute;
    top: 20%;
    width: 70%;
    z-index: 5;
    background-color: red;
    padding: 15px;
}
.header__text {
  background-color: pink;
  height: 300px;
}