Creating a hexagon in CSS, symmetry

问题

I have to create a hexagon and I really want it to be full HTML and CSS. It is almost done, except the fact that it is not fully symmetric. The left corner is not aligned with the right corner. The current 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;
}

The HTML:

<div class="hexagon outer">
   <div class="hexagon inner">

   </div>
</div>

Example: http://jsfiddle.net/jK7sH/

The outer hexagon will have an (background) effect in the end, that is why there are two (inner and outer).

I tried to align them by trial and error, but I don't think that works because the :before and :after rectangles are skewed.

Is it possible to create a symmetric hexagon with just CSS without the use of borders?

Thanks in advance for all information!

回答1:

hexagone is 8 sides , isn't it ?

you could give a try with background linear-gradient http://dabblet.com/gist/5767212

hover them to and see how it reacts while width increase.

来源：https://stackoverflow.com/questions/17070719/creating-a-hexagon-in-css-symmetry

标签

css

css3