CSSで六角形を作成する、対称性

Question

私は六角形を作成しなければなりません。本当に完全なHTMLとCSSにしたいと思っています。それが完全に対称ではないという事実を除いて、ほぼ完了です。左隅が右隅に揃っていません。 現在CSS：

.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; 
} 

HTML：

<div class="hexagon outer"> 
    <div class="hexagon inner"> 

    </div> 
</div> 

例：外側の六角形は、最終的に（バックグラウンド）効果を有するであろうhttp://jsfiddle.net/jK7sH/

二つがある理由、すなわち、（あります内側と外側）。

試行錯誤で整列させようとしましたが、before：とafter：四角形が歪んでいるため、動作しないと思います。

境界線を使用せずにCSSだけで対称六角形を作成することはできますか？

ありがとうございました！

Answer 1

ヘキサゴンは8面ですね。

あなたはそれらを置いて、それがしばらく幅の増加をどのように反応するか見背景線形勾配で http://dabblet.com/gist/5767212

を試してみることができます。