CSS Hexagon with shadow

by ian_smithz

HTML

<div id="hexagon"></div>

CSS

body {background: grey}

#hexagon{
    background: red;
    width: 100px; 
    height: 60px;
    position: relative;
    border: 4px solid #fff;
    border-width: 4px 4px 0 4px;
            filter: drop-shadow(0px 6px 1px #fff);
-webkit-filter: drop-shadow(0px 6px 1px #fff);
-moz-filter: drop-shadow(0px 6px 1px #fff);

}

#hexagon:after{
    content:"";
    display: block;
    position: absolute;
    left: 15px;
    width: 0; 
    height:0;
    border-bottom: 70px solid transparent;
    border-left: 70px solid red;
    z-index: 2;
    
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    
    border-left: 70px solid transparent;
    border-bottom: 70px solid red;
    top: 25px;
}


body { padding: 100px; }

JavaScript

/*


Hexagon with shadow (not really a perfect one though)
Using some adjusted CSS Triangles (http://css-tricks.com/snippets/css/css-triangle/)

Idea from JD Graffam via @chriscoyier


*/