I am currently in the process of designing a downward arrow for the bottom of a full-width div. The arrow works well when transitioning from a colored section to a white one, as seen below:
https://i.sstatic.net/VsVW7.png
However, I am encountering issues in another situation...
https://i.sstatic.net/VsVW7.png
In the scenario above, the blue div with the arrow is running into a full-width background image, and it doesn't quite achieve the desired effect.
I aim to position the tip of the arrow over the top of the image or another color. How can I accomplish this?
This is my current 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 am using the border color 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;
}