在标题图像上三角形向下的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

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

Answer 2

它也会在您的实际网站上正确显示，但与其他元素重叠。尝试在before元素上添加z-index，如下所示：

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