title: Creating a hexagon in CSS, symmetry
body: <p>I have to create a hexagon and I really want it to be full HTML and CSS. It is almost done, except the fact that it is not fully symmetric. The left corner is not aligned with the right corner. 
  The current css:</p>
  
  <pre><code>.hexagon.outer {
      width: 318px;
      height: 452px;
      position: relative;
  }
  .hexagon.outer, .hexagon.outer:before, .hexagon.outer:after {
     background-repeat:no-repeat;
      background-color: #585858;
  }
  .hexagon.outer:before, .hexagon.outer:after {
      content: "";
      position: absolute;
      width: 262px;
      height: 262px;
      top:95px;
      -moz-transform: rotate(54.5deg) skew(22.5deg);
      -webkit-transform: rotate(54.5deg) skew(22.5deg);
      transform: rotate(54.5deg) skew(22.5deg);
  }
  .hexagon.outer:before {
      left: -130px;
  }
  .hexagon.outer:after {
      left: 186px;
  }
  .hexagon.outer span {
      position: absolute;
      top: 0;
      left: 0;
      width: 100px;
      height: 55px;
      background:#585858;
      z-index: 1;
  }
  
  .hexagon.inner {
      width: 276px;
      height: 372px;
      position: relative;
      margin:0 auto;
      top: 40px;
      z-index:4;
  
  }
  .hexagon.inner, .hexagon.inner:before, .hexagon.inner:after {
     background-repeat:no-repeat;
      background-color: white;
  }
  .hexagon.inner:before, .hexagon.inner:after {   
      content: "";
      padding:0;
      margin:0;
      position: absolute;
      width: 215px;
      height: 215px;
      top:79px;
      -moz-transform: rotate(54.5deg) skew(22.5deg);
      -webkit-transform: rotate(54.7deg) skew(22.5deg);
      transform: rotate(54.7deg) skew(22.5deg);
  }
  
  .hexagon.inner:before {
      left: -107px;
  }
  .hexagon.inner:after {
      left: 169px;
  }
  .hexagon.inner span {
      position: absolute;
      top: 0;
      left: 0;
      width: 100px;
      height: 55px;
      background:#585858;
      z-index: 1;
  }
  </code></pre>
  
  <p>The HTML:</p>
  
  <pre><code>&lt;div class="hexagon outer"&gt;
     &lt;div class="hexagon inner"&gt;
  
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Example: <a href="http://jsfiddle.net/jK7sH/" rel="noreferrer">http://jsfiddle.net/jK7sH/</a></p>
  
  <p>The outer hexagon will have an (background) effect in the end, that is why there are two (inner and outer).</p>
  
  <p>I tried to align them by trial and error, but I don't think that works because the :before and :after rectangles are skewed.</p>
  
  <p>Is it possible to create a symmetric hexagon with just CSS without the use of borders?</p>
  
  <p>Thanks in advance for all information! </p>