html - 在彩色 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>