向下箭头覆盖彩色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>