title: CSS navigation with cut-out notch as marker
body: <p>I know I have seen this somewhere before, but I am trying to create a black fixed navbar with a marker that is transparent cut-out triangle. I need help getting the triangle cut-out to be transparent to the background, so when you scroll the page, you can see through to the content beneath:</p>
  
  <p>I have a standard list/anchor navigation with a javascript to move the .current class depending upon the page section:</p>
  
  <pre><code>&lt;div class="navbar"&gt;
  &lt;ul&gt;
      &lt;li class="current"&gt;&lt;a&gt;home&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a&gt;products&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a&gt;services&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a&gt;contact us&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>styled  with the following CSS:</p>
  
  <pre><code>.navbar {
      width: 100%;
      position: fixed;
      background: black;
      float: left;
  }
  
  ul, li {
      list-style: none;
      margin: 0;
      padding: 0;
      float: left;
  }
  
  
  a {
      padding: 10px 20px 20px;
  }
  
  .current a {
      background: transparent url('../img/wedge-red.png') center bottom no-repeat;            
  }
  </code></pre>
  
  <p>The only way I can think to do it is to add extra divs on either side of the ul and assign the background to them, and then use a transparent png with a cutout as the background of the li a's.</p>
  
  <p>Is there a way to do this without getting really ugly like that, and adding extra divs?</p>