How come half the triangle is missing

Question

I was looking at css-tricks to see how to make a triangle with css. In the comments there was a question about how to give the triangle a border.

I thought I had a solution, but the results were unexpected. How come the right half of the inner triangle is missing.

 #outer { display: block; height: 0; width: 0; border-top: 50px solid red; border-left: 50px solid transparent; border-right: 50px solid transparent; } #inner { display: inline; margin: 0; position: relative; left: -40px; top: -6px; height: 0; width: 0; border-top: 40px solid green; border-bottom: 0 solid transparent; border-left: 40px solid transparent; border-right: 40px solid transparent; } 

 <div id="outer"> <div id="inner"></div> </div> 

If I change the inner triangle to have display: block or display: inline-block , the right half exists, but it's gone when then inner triangle has display: inline and I don't know why.

Answer 1

Strange, it works on Firefox and IE.

You can make it work on Chrome with

#inner::after {
  content: '\200B';
}

 #outer { display: block; height: 0; width: 0; border-top: 50px solid red; border-left: 50px solid transparent; border-right: 50px solid transparent; } #inner { display: inline; margin: 0; position: relative; left: -40px; top: -6px; height: 0; width: 0; border-top: 40px solid green; border-bottom: 0 solid transparent; border-left: 40px solid transparent; border-right: 40px solid transparent; } #inner::after { content: '\\200B'; } 

 <div id="outer"> <div id="inner"> </div> </div>