CSS-Rendering-Problem mit Dreieck unten auf Header-Bild

Question

Ich versuche, ein Dreieck nach unten auf mein Bild anwenden, aber ich habe ein Problem. Was ist das Problem?

Sieht gut auf jsfiddle: here

auf meiner Live-Seite sieht nicht gut aus (Grenze nur auf der rechten Seite des Bildes angewendet wird): here

Sieht gut aus (Geige):

Sieht nicht gut aus:

.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

Es wird auch auf Ihrer Live-Site korrekt angezeigt, aber von anderen Elementen überlappt. Versuchen Sie, einen Z-Index auf, bevor Element hinzugefügt wird, wie folgt aus:

.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; 
}