Создание шестиугольника в 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/

Наружный шестигранник будет иметь (фон) эффект в конце концов, именно поэтому существуют два (внутренний и внешний).

Я попытался выровнять их методом проб и ошибок, но я не думаю, что это работает, потому что: перед и: после прямоугольников перекошены.

Возможно ли создать симметричный шестиугольник только с CSS без использования границ?

Заранее благодарим за информацию!

Answer 1

шестиугольник 8 сторон, не так ли?

вы могли бы дать попробовать с фоном линейного градиента http://dabblet.com/gist/5767212

парить их и посмотреть, как он реагирует, а ширина увеличивается.