헤더 이미지에 삼각형이 내려가는 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; 
}