在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中创建一个六边形，对称

回答

相关问题