Как наложить слой на фоновое изображение и перекошенные блоки div для создания наложения, используя CSS

Question

Я пытаюсь создать раздел во всю ширину с частично скрытым фоновым изображением. Однако я не могу скрыть фоновое изображение с помощью свойств переполнения или z-индекса.

Моя цель - скрыть часть фонового изображения, которая не перекрывается с одним из классов наклонных стрелок, создавая стрелку указывает вправо на черном фоне, а фоновое изображение видно только в отрицательном пространстве вверху, внизу и справа от формы X.

.calloutbar-section {
  background:#282a32;
  position: relative;
  padding: 80px 15px;
}

.calloutbar-section .calloutbar-bg {
   background-image:url(https://via.placeholder.com/300);
   background-repeat: no-repeat;
   background-position: right center;
   background-size: contain;
   overflow:hidden;
   width:100%;
   position: absolute;
   left:0;
   top: 0;
   right: 0;
   bottom: 0;
   z-index:0;
 }

.calloutbar-section .skewed-arrow-left {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   width: 30%;
   background-color: transparent;
   transform-origin: top right;
   transform: skew(45deg, 0deg);
   border-left: 30px solid #FFFFFF;
   z-index:1;
   overflow-x: hidden;
 } 

.calloutbar-section .skewed-arrow-right {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 30%;
  background-color: transparent;
  transform-origin: bottom right;
  transform: skew(-45deg, 0deg);
  border-left: 30px solid #FFFFFF;
  z-index: 1;
  overflow-x: hidden;
}

.reversed {
  color:#FFFFFF;
}

<section class="calloutbar-section">
  <div class="calloutbar-bg"></div>
  <div class="skewed-arrow-left"></div>
  <div class="skewed-arrow-right"></div>
  <div class="calloutbar-body container">
    <div class="row">
      <div class="col-lg-7">
        <div class="title reversed">Lorem Ipsum Amet</div>
        <p class="reversed large">lorem ipsum amet</p>
      </div>
    </div>
  </div>
</section>

Answer 1

После ответа, отправленного здесь , я закончил тем, что использовал псевдоэлементы и дополнительный div, чтобы создать эффект маскировки, который я хотел, при этом все еще показывая фоновое изображение.

.calloutbar-section {
  background:#282a32;
  position: relative;
  padding: 80px 15px;
}

.calloutbar-section.footer .skewed-arrow.left,
.calloutbar-section.footer .skewed-arrow.none {
  transform-origin: top right;
  transform: skew(45deg, 0deg);
} 

.calloutbar-section.footer .skewed-arrow.right {
  transform-origin: bottom right;
  transform: skew(-45deg, 0deg);
}
.calloutbar-section.footer .skewed-arrow {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 35%;
  background-color: transparent;
  background-clip: padding-box;
  border-left: 15px solid #FFFFFF;
  z-index:1;
  overflow-x: hidden;
}

.reversed {
  color:#FFFFFF;
}

.calloutbar-section.footer .skewed-arrow.left::before {
  content: "";
  background-image:url(https://via.placeholder.com/1000);
  transform: skewX(-45deg); 
  -ms-transform: skewX(-45deg); /* IE 9 */
  -webkit-transform: skewX(-45deg); /* Safari and Chrome */
  background-repeat: no-repeat; 
  background-position: top left; 
  background-size:cover;
  position: absolute;
  -webkit-transform-origin: top left;
  -ms-transform-origin: top left;
  transform-origin: top left;
  width: 100%; 
  height: 100%; 
}


.calloutbar-section.footer .skewed-arrow.right::before {
  content: "";
  background-image:url(https://via.placeholder.com/1000);
  transform: skewX(45deg); 
  -ms-transform: skewX(45deg); /* IE 9 */
  -webkit-transform: skewX(45deg); /* Safari and Chrome */
  background-repeat: no-repeat; 
  background-position: top left; 
  background-size:cover;
  position: absolute;
  -webkit-transform-origin: bottom left;
  -ms-transform-origin: bottom left;
  transform-origin: bottom left;
  width: 100%;
  height: 100%;
}

<section class="calloutbar-section">
  <div class="skewed-arrow left"></div>
  <div class="skewed-arrow right"></div>
  <div class="skewed-arrow none"></div>
  <div class="calloutbar-body container">
    <div class="row">
      <div class="col-lg-7">
        <div class="title reversed">Lorem Ipsum Amet</div>
        <p class="reversed large">lorem ipsum amet</p>
      </div>
    </div>
  </div>
</section>