CSS'de bir altıgen oluşturma, simetri

Question

Altıgen oluşturmam gerekiyor ve tam HTML ve CSS olmasını istiyorum. Tamamen simetrik olmadığı gerçeği dışında neredeyse bitti. Sol köşe sağ köşeyle hizalanmamış. akım css:

HTML

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

:

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

    </div> 
</div> 

Örnek: (iki vardır neden olduğu http://jsfiddle.net/jK7sH/

dış altıgen sonunda bir (arka plan) etkiye sahip olacaktır iç ve dış).

Deneme ve hata ile bunları hizalamayı denedim, ancak bunun işe yaradığını düşünmüyorum çünkü: önce ve: dikdörtgenler çarpık olduktan sonra.

Sınırları kullanmadan yalnızca CSS ile simetrik bir altıgen oluşturmak mümkün mü?

Tüm bilgiler için şimdiden teşekkür ederiz!

Answer 1

Altıgen 8 tarafı değil, değil mi?

arka plan doğrusal-gradyan http://dabblet.com/gist/5767212

onları hover ile denemeye ve genişlik artış olurken nasıl tepki vereceğini görebiliyordu.