How come half the triangle is missing

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.