在CSS中創建一個六邊形，對稱

我必須創建一個六邊形，我真的希望它成爲完整的HTML和CSS。它幾乎完成，除了它不完全對稱的事實。左角與右角不一致。目前的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而不使用邊框？

在此先感謝您的所有信息！

來源

2013-06-12 fps

爲什麼不使用SVG背景圖片？ SVG是爲這樣的事情設計的。否則，你可以使用CSS漸變作爲背景。 –

hexagone是8邊，不是嗎？

你可以給背景線性漸變 http://dabblet.com/gist/5767212

他們懸停一個嘗試，看看它，而寬度增加的反應。

來源

2013-06-12 17:40:06

不！ Hex = 6 Oct = 8（六邊形：6面;己烷：6碳氫化合物與八邊形：8面;辛烷：8碳氫化合物） – ChrisW

哦，我的上帝，我感到慚愧:) –

感謝您的建議，但鏈接不顯示我六角形。這可能是因爲網站Dabblet和我的瀏覽器兼容性（Chrome 27.0 Mac）或其他東西（底部的代碼並不總是顯示爲：S）...您的技術似乎很有前途，我會在早上嘗試！再次感謝，如果它有效，我會讓你知道！ – fps

在CSS中創建一個六邊形，對稱

回答

相關問題