I need to create a hexagon, and I really want it to be full of HTML and CSS. This is almost done, except for the fact that it is not completely symmetrical. The left corner is not aligned with the right corner. 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; }
HTML:
<div class="hexagon outer"> <div class="hexagon inner"> </div> </div>
Example: http://jsfiddle.net/jK7sH/
The outer hexagon will have a (background) effect at the end, so there are two (inner and outer).
I tried to align them with trial and error, but I do not think this works because: before and: after the rectangles are skewed.
Is it possible to create a symmetrical hexagon with just CSS without using borders?
Thanks in advance for any information!
source share