सीएसएस में हेक्सागोन बनाना, समरूपता

Question

मुझे हेक्सागोन बनाना है और मैं वास्तव में इसे पूर्ण HTML और 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/

बाहरी षट्भुज अंत में एक (पृष्ठभूमि) प्रभाव पड़ेगा, यही वजह है कि वहाँ दो हैं (आंतरिक और बाहरी)।

मैंने उन्हें परीक्षण और त्रुटि से संरेखित करने का प्रयास किया, लेकिन मुझे नहीं लगता कि यह काम करता है क्योंकि: पहले और: आयतों के बाद skewed हैं।

क्या सीमाओं के उपयोग के बिना केवल सीएसएस के साथ एक सममित हेक्सागोन बनाना संभव है?

सभी जानकारी के लिए अग्रिम धन्यवाद!

Answer 1

हेक्सागोन 8 पक्ष है, है ना?

आप के साथ पृष्ठभूमि रैखिक-ढाल http://dabblet.com/gist/5767212

करने के लिए उन्हें मंडराना आजमाइए और देखें कि यह कैसे जबकि चौड़ाई वृद्धि प्रतिक्रिया करते हैं सकता है।