<div class="hexagon"><span></span></div>
.hexagon {
width: 100px;
height: 55px;
position: relative;
}
.hexagon,
.hexagon:before,
.hexagon:after {
background: red;
box-shadow: 0 0 10px rgba(0,0,0,0.8);
}
.hexagon:before,
.hexagon:after {
content: "";
position: absolute;
left: 22px;
width: 57px;
height: 57px;
transform: rotate(145deg) skew(22.5deg);
}
.hexagon:before {
top: -29px;
}
.hexagon:after {
top: 27px;
}
.hexagon span {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 55px;
background: red;
z-index: 1;
}
See the Pen CSS Hexagon by Geoff Graham (@geoffgraham) on CodePen.
Nice!
Good Job! But you’ve forgotten the <span> in your <div> :)
Aw dang. It was there, but my code markup thingamagig was stripping it out, anyway, you can see it in the code above now.
I have a dream:
thanks a lot man !
each time i try to enlarge the hexagon i get weird shapes :s is it possible to explain further more ? thank you
no demo?
thanks man, no more border for hexagon!
What if: You wanted to use a small logo in the Middle box of a transparent hex … Ie, it would appear to be inside the Hexagon …
currently the css .. shows three instances of the img file, what I would find real cool is to opaque the Panels and have the logo image showing through the panels.
I did a fiddle for this tutorial so you don’t have to copy the code to see the result. http://jsfiddle.net/vm97b/5/
If you like hexagon div’s and stuff please check out my jquery plugin. https://github.com/tpmdud/dodecagondiv
– my plugin works with pictures too :)
Bonus points to anyone who can explain how the heck it works
People are gonna copy this code so please use your pseudo-elements correctly and prefix them with two colons!
::before
and::after
are pseudo-elements, not pseudo-selectors and should be written as such!I like double-colons too generally, but there are two facts at play here: