title: Single div horizontal CSS hexagon button
body: <p>I'd like to create a CSS button in the shape of a hexagon using a single div to keep the markup clean. I've been experimenting with before and after pseudo elements and can do it with the hexagon 'points' at top and bottom but would like to do it with them pointing left and right to fit the rest of my theme. I've got close but I can't get the after pseudo element where I want it. Can anyone fix this?</p>
  
  <p>Here's where I'm up to:</p>
  
  <pre><code>#hex {
    background-color:green;
    width:100px;
    height:100px;
    float:left;
    display:block;
  }
  
  #hex::before {
    content:"";
    border-top:50px solid red;
    border-bottom:50px solid red;
    border-right:30px solid blue;
    float:left;
  }
  
  #hex::after {
    content:"";
    border-top:50px solid red;
    border-bottom:50px solid red;
    border-left:30px solid blue;
    float:left;
  }
  </code></pre>
  
  <p>and there's a JS Fiddle at <a href="http://jsfiddle.net/higginbottom/YKx2M/" rel="nofollow">http://jsfiddle.net/higginbottom/YKx2M/</a></p>