title: Creating hexagon shapes with list items
body: <p>I have tried multiple options and tutorials, however, I am dealing with a Wordpress site and can only customize the HTML output so much for this nav menu... How can I make this work for these two menu items in the header? </p>
  
  <p>I am dealing with list items, so this doesn't exactly work the same way as the post that I was penalized against for being a duplicate. It deals with only one element whereas I have links wrapped in li's that are part of the nav bar, so a bit different.</p>
  
  <p>I want this:</p>
  
  <p><img src="https://i.stack.imgur.com/ZkkcX.png" alt="enter image description here"></p>
  
  <p>and the HTML/SCSS I am working with (unsuccessfully) is below:</p>
  
  <p><a href="http://codepen.io/anon/pen/wsodI" rel="nofollow noreferrer">http://codepen.io/anon/pen/wsodI</a></p>
  
  <pre><code>&lt;ul id="menu-right-menu-buttons" class="right-menu"&gt;
  &lt;li id="menu-item-8439" class="first-item menu-item-type-post_type menu-item-object-page menu-item-8439"&gt;&lt;a href="#"&gt;Businesses&lt;/a&gt;&lt;/li&gt;
  &lt;li id="menu-item-8438" class="last-menu-item menu-item menu-item-type-post_type menu-item-object-page menu-item-8438"&gt;&lt;a href="#"&gt;Job Seekers&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  .right-menu {
      float: right;
  
      li {
          display: inline-block;
          position: relative;
          z-index: 9999;
          left: -100px;
          height: 20px; 
          border-left: 60px solid transparent; 
          border-right: 60px solid transparent; 
          border-bottom: 100px solid #021e4e;
  
          a {
              vertical-align: middle;
              position: relative;
              top: 50%;
          }
      }
  
      li:after {
          position: relative; 
          height: 0px; 
          width: 200px; 
          border-top: 100px solid #021e4e; 
          border-left: 60px solid transparent; 
          border-right: 60px solid transparent;
      }
  }
  </code></pre>