MTVBorders - multiple

by sanford

HTML

<DIV class="boxen"><SPAN>1</SPAN></div>    
<DIV class="boxen"><SPAN>2</SPAN></div>    
<DIV class="boxen"><SPAN>3</SPAN></div>

CSS

BODY { padding: 100px; }
DIV { float: left; margin-right: 20px;    text-align: center;}
.boxen {
    background:white;
    outline: 2px solid transparent;
    outline-offset: -2px;
    font-size:10px;
    width: 100px;
    height: 100px;
    border-top: 2px dotted gray;
    border-left: 2px dotted gray;
    border-right: 1em solid  gray;
    border-bottom: 1em solid gray;
    position: relative;
    transition: all ease-out 420ms;
    -webkit-transition: all ease-out 420ms;
}
.boxen:hover {
    border-color: darkblue;
    outline-color: darkblue;
    border-right-width:24px;
    border-bottom-width:24px;
    font-size: 24px;
    margin-top:-14px;
}
.boxen:after,.boxen:before {
    height:0px;
    width: 0px;
    content: "";
    position:absolute;
}    
.boxen:after {
    border-right: 1.3em solid transparent;
    border-bottom: 1em solid white;
    bottom: -1em;
    left: -2px;
    
}
.boxen:before {
    border-right: 1em solid white;
    border-bottom: 1.3em solid transparent;
    right: -1em;
    top: -2px;
    
}

.boxen SPAN {
    font: 50px/100px Arial;
    color: inherit;
}