title: making a trapezoid tab shape
body: <p>I'm trying to replicate <a href="http://cssmenumaker.com/menu/flat-tabbed-menu#" rel="nofollow">this menu feel</a> but I've some trouble making the trapezoid shape of the different tabs. I went through the source code and also in the dev tool I removed each css propriety one by one but still I'm not figuring it out. I also tried </p>
  
  <p>I made a <a href="http://jsfiddle.net/activee/q6ur8dmm/1/" rel="nofollow">JSFiddle</a> trying to replicate it (there is no trapezoid shape at the moment).</p>
  
  <pre><code>&lt;nav&gt;
          &lt;ul&gt;
             &lt;li class=" active"&gt;&lt;a href="#"&gt;NEWS&lt;/a&gt;&lt;/li&gt;
             &lt;li&gt;&lt;a href="#"&gt;FORUM&lt;/a&gt;&lt;/li&gt;
             &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;TRUC&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
             &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;OTHERS&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
  &lt;/nav&gt;
  
  
  nav{
      background:white;
      border-bottom: 2px solid #50bfff;
  }
  nav ul{
      margin:0;
  }
  nav ul li{
      display:inline-block;
  }
  nav a{
      padding: 1rem;
      color:#505050;
      display:block;
      text-decoration:none;
  }
  nav ul .active{
      background:#50bfff;
  }
  </code></pre>