CSSレンダリングの問題（ヘッダレンダリング時に三角形を下にする）

Question

画像の下に三角形を適用しようとしていますが、問題が発生しています。何が問題ですか？

jsfiddleに良いルックス：here

は（ボーダーのみ画像の右側に適用される）私のライブのページに良い見ていない：here

が良い（フィドル）を検索します：

良い見ていない：

.header-triangle-down:before, .header-triangle-down:after { 
    box-sizing: border-box !important; 
    content: " "; 
    position: absolute !important; 
    top:0 !important; 
    display: block !important; 
    width: 50% !important; 
    height: 100% !important; 
    border-bottom: 30px solid red !important; 
} 

.header-triangle-down:before { 
    left: 0; 
    border-right: 20px solid transparent !important; 
    border-left: 0; 
} 

.header-triangle-down:after { 
    right: 0; 
    border-left: 20px solid transparent !important; 
    border-right: 0; 
} 

Answer 1

ライブサイトでも正しく表示されていますが、他の要素と重なっています。次のように、前の要素にZ-インデックスを追加してみてください：

.header-triangle-down:before { 
    left: 0; 
    border-right: 20px solid transparent !important; 
    border-left: 0; 
    z-index: 1; 
} 

Answer 2

.header-triangle-down:before { 
    left: 0; 
    border-right: 20px solid transparent !important; 
    border-left: 0; 
    z-index: 1; 
}