How come half the triangle is missing
<p>I was looking at <a href="https://css-tricks.com/snippets/css/css-triangle/" rel="nofollow">css-tricks</a> to see how to make a triangle with css. In the comments there was a question about how to give the triangle a border.</p>

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

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>#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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="outer"&gt;
  &lt;div id="inner"&gt;&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

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