在彩色div /背景图像上叠加向下箭头

Question

我正在创建一个全宽div底部的向下箭头，它在下面的一个实例中很有用（彩色部分会在白色部分中运行）：

但不是这个例子......

上面的情况有一个蓝色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>