Overlay down arrow over coloured div / background image - html

Question

I'm creating a down arrow for the bottom of a full width div, which works great in the one instance below (where a coloured section runs into a white section):
But not for this instance...
The situation above has a blue div with a down arrow going into a full width background image. As you can see it doesn't quite work.
I want the tip of the arrow to lay over the top of the image... or another colour. How can I do that?
Here's my setup:
<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>
I'm using the border colour to set it to white.
.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

The description and the code you provided don't really match well so I'm not quite sure what you're asking. Are you trying to achieve something like this demo?
.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>