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

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```