Greg Greg - 2 months ago 6
CSS Question

CSS rendering issue with triangle down on header image

I'm trying to apply a triangle down at the bottom of my image but I'm experiencing an issue. What is the problem?

Looks good on jsfiddle: here

Doesn't look good on my live page (border is only applied to the right side of the image): here

Looks good (fiddle):
enter image description here

Doesn't look good:
enter image description 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

It is displaying correctly on your live site as well, but overlapped by other elements. Try adding a z-index on your before element, like this:

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