在页眉图像上用三角形表示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-index的，就像这样：

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