色付きのdiv /背景画像に下向きの矢印を重ねる

Question

下の矢印を作成して、下の1つのインスタンス（色付きのセクションが白いセクションになる）でうまく機能する全幅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>