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;
}

Comments

  1. User Avatar
    Thierry Koblentz
    Permalink to comment#

    Nice!

  2. User Avatar
    Raymond Torres
    Permalink to comment#

    Good Job! But you’ve forgotten the <span> in your <div> :)

    • User Avatar
      Chris Coyier
      Permalink to comment#

      Aw dang. It was there, but my code markup thingamagig was stripping it out, anyway, you can see it in the code above now.

  3. User Avatar
    cnwtx
    Permalink to comment#

    I have a dream:

    div.hexagon {
    shape:hexagon;
    width:100px;
    height:100px;
    box-shadow:0 0 8px #000000;}
  4. User Avatar
    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

  5. User Avatar
    Mahroof Ali

    no demo?

  6. User Avatar
    thole05
    Permalink to comment#

    thanks man, no more border for hexagon!

  7. User Avatar
    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;
    }
    <

  8. User Avatar
    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 :)

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag