向下箭頭覆蓋彩色div /背景圖片

Question

我創建了一個全寬div底部的向下箭頭，它在下面的一個實例中很有效（其中彩色部分運行成白色部分）：

但不適合這種情況下...

上面的情況有一個向下的箭頭進入全寬背景圖像的藍色股利。正如你所看到的那樣，這不太合適。

我想要箭頭的頂端放置在圖像的頂部......或另一種顏色。我怎樣才能做到這一點？

這裏是我的設置：

<div class="bannerStripHeader" style="background-color:#009edb;"> 
    <section class="row">   
     <div class="columns large-12" style="color:inherit !important;"> 
      <div class="brandHeaderContent"> 
       Content here  
      </div> 
     </div>  
    </section> 
</div> 

我使用的邊框顏色將其設置爲白色。

.bannerStripHeader:before { 
border-width: 50px 0 30px 70vw; 
border-color: transparent transparent transparent #fff; 
left: -5px; 
-webkit-transform: rotateZ(0deg); 
transform: rotateZ(0deg); 
-webkit-transform-origin: 100% 50%; 
-ms-transform-origin: 100% 50%; 
transform-origin: 100% 50%; 
} 
.bannerStripHeader:after { 
border-width: 50px 70vw 30px 0; 
border-color: transparent #fff transparent transparent; 
right: -5px; 
-webkit-transform: rotateZ(0deg); 
transform: rotateZ(0deg); 
-webkit-transform-origin: 0 50%; 
-ms-transform-origin: 0 50%; 
transform-origin: 0 50%; 
} 
.bannerStripHeader:after, 
.bannerStripHeader:before { 
content: ""; 
border-style: solid; 
bottom: -23px; 
height: 0; 
-webkit-transition: -webkit-transform .5s ease .5s; 
transition: transform .5s ease .5s; 
width: 0; 
position: absolute; 
} 

Answer 1

您提供的描述和代碼不能很好匹配，所以我不太清楚您要問什麼。你是否想要實現這樣的演示？

.bannerStripHeader { 
 
    position: absolute; 
 
    overflow: hidden; 
 
} 
 

 
.bannerStripHeader:before { 
 
    border-width: 50px 50vw 0 50vw; 
 
    border-color: #009edb transparent transparent transparent; 
 
    left: 50%; 
 
    transform: translate(-50%, 0); 
 
    top: 0; 
 
    width: 0; 
 
    height: 0; 
 
    display: block; 
 
    content: ""; 
 
    border-style: solid; 
 
    position: absolute; 
 
} 
 

 

 
/* only for demo */ 
 
img { 
 
    width: 100%; 
 
}

<div class="bannerStripHeader"> 
 
    <section class="row"> 
 
    <div class="columns large-12"> 
 
     <div class="brandHeaderContent"> 
 
     <img src="https://images.unsplash.com/photo-1427477321886-abc24e8ce923?dpr=1&auto=compress,format&fit=crop&w=1199&h=800&q=80&cs=tinysrgb&crop="> 
 
     </div> 
 
    </div> 
 
    </section> 
 
</div>