How to layer background image and skewed divs to create overlay using CSS

Question

I am trying to create a full width section with a background image that is partially hidden. However, I am unable to hide the background image using overflow or z-index properties.

My goal is to hide the part of the background image that does not overlap with one of the skewed arrow classes, creating an arrow pointing right with a black background and the background image only visible in the negative space above, below and to the right of the X shape.

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

score 0 · Accepted Answer · answered May 06 '20 at 14:18

Following the answer posted here, I ended up using pseudo elements and an extra div to create the masking effect I wanted while still showing the background image.

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

How to layer background image and skewed divs to create overlay using CSS

1 Answers1