Шестиугольник с тенью онлайн урок.




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