Честный полигон

by Евгений

HTML

<span class="hexcell">
    <span>
        <span>
            <span>
                <span>
                    <span class="input"></span>
                </span>
            </span>
        </span>
    </span>
</span>
<a href="http://habrahabr.ru/post/175847/">отсюда</a>

CSS

.hexcell {
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    width: 50px;
    height: 70px;
    overflow:hidden;
    visibility:hidden;
    -webkit-transform: rotate(120deg);
       -moz-transform: rotate(120deg);
        -ms-transform: rotate(120deg);
         -o-transform: rotate(120deg);
            transform: rotate(120deg);
}
.hexcell span {
    position:relative;
    width:100%;
    height:100%;
    display:inline-block;
    overflow:hidden;
    visibility:hidden;
    vertical-align: middle;
    text-align: center;
}
.hexcell > span {
    -webkit-transform: rotate(-60deg);
       -moz-transform: rotate(-60deg);
        -ms-transform: rotate(-60deg);
         -o-transform: rotate(-60deg);
            transform: rotate(-60deg);
}
.hexcell > span > span {
    -webkit-transform: rotate(-60deg);
       -moz-transform: rotate(-60deg);
        -ms-transform: rotate(-60deg);
         -o-transform: rotate(-60deg);
            transform: rotate(-60deg);
}
.hexcell > span > span > span{	/*первая рамка*/
    border: 1px solid #000000;
    height:68px;
    width:48px;
    visibility:visible;
    -webkit-transform: rotate(120deg);
       -moz-transform: rotate(120deg);
        -ms-transform: rotate(120deg);
         -o-transform: rotate(120deg);
            transform: rotate(120deg);
}
.hexcell > span > span > span > span{	/*вторая рамка*/
    border: 1px solid #000000;
    height:68px;
    width:48px;
    top:-1px;
    left:-1px;
    visibility:visible;
    -webkit-transform: rotate(-60deg);
       -moz-transform: rotate(-60deg);
        -ms-transform: rotate(-60deg);
         -o-transform: rotate(-60deg);
            transform: rotate(-60deg);
}
.hexcell > span > span > span > span > span.input{	/*содержимое с третьей рамкой*/
    border: 1px solid #000000;
    height:68px;
    width:48px;
    top:-1px;
    left:-1px;
    position:relative;
    visibility:visible;
    font-size:34px;
    -webkit-transform:...