带有对角线分隔线（不同方向的对角线）的背景图像

Question

我真的不知道这是否可以实现，但是让我们尝试一下。我知道关于将背景图像放在对角线部分已经解决了一个问题。但是，正如我在标题中所述，我的对角线既从左到右，又从右到左。这足以解决问题的答案不再起作用。我一直在尝试，但是图像要么覆盖了整个部分并被“分割”，要么对部分的一部分进行了很好的调整，但另一个空白。我将放置到目前为止的代码，以便您可以尝试使用它：

/*.lr stands for left to right, and so rl right to left*/

.lr-section {
    position: relative;


}
.lr-diagonal {
    text-align: center;
    -moz-transform: scale(-1, 1);
    -webkit-transform: scale(-1, 1);
    -o-transform: scale(-1, 1);
    -ms-transform: scale(-1, 1);
    transform: scale(-1, 1);


}
.lr-content {
      -moz-transform: scale(-1, 1);
      -webkit-transform: scale(-1, 1);
      -o-transform: scale(-1, 1);
      -ms-transform: scale(-1, 1);
      transform: scale(-1, 1);
}
.lr-section:before {
    position: absolute;
    content:'';




}


.lr-diagonal {
    z-index: 1;
    padding: 3em;
}
.lr-diagonal:before {
    -webkit-transform: rotate(-3deg);
    transform: rotate(-3deg);
    -webkit-transform-origin: -3% 0;
    transform-origin: -3% 0;
    top: 0;
    left: -25%;
    z-index: -1;
    width: 150%;
    height: 75%;
    background: inherit;


}
    
    
    
    
 html {
    margin: 0px;
    overflow-x: hidden;
  }
p {
    color: white;
}
.rl-section {
    position: relative;
    
}
.rl-section:before {
    position: absolute;
    content:'';
}



.rl-diagonal {
    z-index: 1;
    padding: 3em;
}
.rl-diagonal:before {
    -webkit-transform: rotate(-3deg);
    transform: rotate(-3deg);
    -webkit-transform-origin: -3% 0;
    transform-origin: -3% 0;
    top: 0;
    left: -25%;
    z-index: -1;
    width: 150%;
    height: 75%;
    background: inherit;
}

<section>
  <div class="first-section" style="padding: 5px 5px 15px; height: 500px;">
      <div class="row">
          <div class="col s6">
            <img src="#">
          </div>
          <div class="col s6">
            <p class="center-align" style="color: white">{{diagonals.statement}}</p>
          </div>
      </div>
        
    </div>
    <div class="lr-diagonal lr-section" style="background-color: blue">
      <div class="lr-content">
        <img src="#">
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
      </div>
    </div>
    <div class="rl-diagonal rl-section" style="background-color:black;">
    <div class="lr-content">
        <img src="#">
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
      </div>
    </div>
</section>

感谢您的帮助！