What do you want to learn today?
Treehouse is the best place to learn web design, web development, and iOS.

Code Snippet

Home » Code Snippets » CSS » Hexagon With Shadow

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

Subscribe to The Thread

  1. Thierry Koblentz

    Nice!

    Reply ↓
  2. Raymond Torres

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

    Reply ↓
    • Chris Coyier

      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. cnwtx

    I have a dream: 

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

Speak, my friend

At this moment, you have an awesome opportunity* to be the person your mother always wanted you to be: kind, helpful, and smart. Do that, and we'll give you a big ol' gold star for the day (literally).

Posting tips:
  • You can use basic HTML
  • When posting code, please turn all
    < characters into &lt;
  • If the code is multi-line, use
    <pre><code></code></pre>
Thank you,
~ The Management ~