CSS에서 육각형 만들기, 대칭

Question

육각형을 만들어야하고 전체 HTML과 CSS로 만들고 싶습니다. 완전히 대칭 적이 지 않다는 것을 제외하고는 거의 완료되었습니다. 왼쪽 모서리가 오른쪽 모서리에 정렬되어 있지 않습니다. 현재 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> 

예 : (두 존재 이유, 즉 http://jsfiddle.net/jK7sH/

외측 육각형 단부에서 (배경)의 영향을 미칠 것이다 안쪽과 바깥 쪽).

시행 착오로 정렬하려고했지만 : before 및 : after 직사각형이 왜곡되어 작동하지 않는다고 생각합니다.

경계선을 사용하지 않고 CSS만으로 대칭형 육각형을 만들 수 있습니까?

미리 감사드립니다.

Answer 1

육각형은 8면이 아닙니까?

당신은 배경 선형 그라데이션 http://dabblet.com/gist/5767212

이에게 가져와 시도를 포기하고 폭 증가하면서 어떻게 반응하는지 볼 수 있었다.