Grow your CSS skills. Land your dream job.

Last updated on:

Hexagon With Shadow

<div class="hexagon"><span></span></div>
.hexagon {
    width: 100px;
    height: 55px;
    position: relative;
}
.hexagon, .hexagon:before, .hexagon:after {
    background: red;
    -moz-box-shadow: 0 0 10px rgba(0,0,0,0.8);   
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.8);   
    box-shadow: 0 0 10px rgba(0,0,0,0.8);   
}
.hexagon:before, .hexagon:after {
    content: "";
    position: absolute;
    left: 22px;
    width: 57px;
    height: 57px;
    -moz-transform: rotate(145deg) skew(22.5deg);
    -webkit-transform: rotate(145deg) skew(22.5deg);
    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;
}

Reference URL

Comments

  1. Raymond Torres
    Permalink to comment#

    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.

  2. cnwtx
    Permalink to comment#

    I have a dream:

    div.hexagon {
    shape:hexagon;
    width:100px;
    height:100px;
    box-shadow:0 0 8px #000000;}
  3. faoza

    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

  4. Mahroof Ali

    no demo?

  5. thole05
    Permalink to comment#

    thanks man, no more border for hexagon!

  6. John Smith
    Permalink to comment#

    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.

    .hexagon, .hexagon:before, .hexagon:after {
    background: url(http://smitty.co.nz/style/img/st_loogo.png);
    -moz-box-shadow: 0 0 10px rgba(0,0,0,0.8);   
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.8);   
    box-shadow: 0 0 10px rgba(0,0,0,0.8);   
    

    }
    .hexagon:before, .hexagon:after {
    content: “”;
    position: absolute;
    left: 22px;
    width: 57px;
    height: 57px;
    -moz-transform: rotate(145deg) skew(22.5deg);
    -webkit-transform: rotate(145deg) skew(22.5deg);
    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: url(http://smitty.co.nz/style/img/st_loogo.png);
    z-index: 1;
    }
    <

  7. Timon G.
    Permalink to comment#

    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 :)

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".