title: Menu with inset transparent triangle
body: <p>I'm trying to style a menu with an <strong><em>inset</em></strong> transparent triangle for each category. The html is like this:</p>
  
  <pre><code>&lt;li class="level0 nav-1 level-top first"&gt;
  &lt;a class="level-top" href="http://shop.de/kinderzimmer"&gt;
  &lt;span&gt;
  &lt;span class="navborder navborder-left"&gt;&lt;/span&gt;
  Kinderzimmer
  &lt;span class="navborder navborder-right"&gt;&lt;/span&gt;
  &lt;/span&gt;
  &lt;/a&gt;
  &lt;/li&gt;
  ...
  </code></pre>
  
  <p>... but I can add/remove spans/classes etc. if needed.</p>
  
  <p>My first attempt was this css:</p>
  
  <pre><code>#nav li.level0 a.level-top span {
      position: relative;
      width: 100%;
      }
  #nav li.level0 a.level-top span:after {
      content: "";
      left: 50%; /* center triangle */
      margin-left: -20px; /* center triangle */
      width: 0;
      height: 0;
      border-left: 20px solid red;
      border-right: 20px solid red;
      border-bottom: 20px solid transparent;
      position: absolute;
      top: 20px;
      }   
  #nav li.level0 a.level-top span span.navborder-left:after {
      border-bottom: 20px solid green;
      }
  #nav li.level0 a.level-top span span.navborder-right:after {
      border-bottom: 20px solid blue;
      }
  </code></pre>
  
  <p>(The colors are just for debugging, the should be matching the nav background when finished.)</p>
  
  <p>The result isn't as expected: <a href="http://jsfiddle.net/9brsR/6/" rel="nofollow">http://jsfiddle.net/9brsR/6/</a></p>
  
  <p>The borders from span.navborder-left and span.navborder-right have gaps to the centered triangle element. </p>
  
  <p>Anyone has a clue how to fix the css to have something like this: <a href="http://puu.sh/7jMEe.png" rel="nofollow">http://puu.sh/7jMEe.png</a> ?</p>