CSS 3D Box Hover Effect - Diagonal Corners

Question

Goal:

I'm creating a graphical menu with a 3D hover effect for a friend's website. There are a series of rectangles. When one is hovered over, it will move upwards and left, leaving behind a darker version of itself to appear that it's sliding outward. (The red circles in the screenshots are just to show the problem area.)

---

What I've Got:

I'm using an unordered list with a <li><a><span> structure. I currently have it moving correctly upon hover, leaving behind the shadow.

Code:

(JSFiddle Below)

HTML:

<section>
    <li class="tall" id="logos"><a class="dark" href=""><span>Logos</span></a></li>
    <li class="wide" id="illustrations"><a class="dark" href=""><span>Illustrations</span></a></li>
    <li class="wide" id="drawings"><a href=""><span>Drawings</span></a></li>
    <li class="small" id="web"><a href=""><span>Web</span></a></li>
    <li class="small narrow"  id="print"><a href=""><span>Print</span></a></li>
    <li class="small" id="other"><a class="dark" href=""><span>Other</span></a></li>
</section>

CSS:

section { //Wrap
    height:200px;
    width:600px;
}
li {
    list-style:none;
    display:block;
    float:left;
    height:47%;
    margin-bottom:2%;
}

a {
    outline:0;
    height:100%;
    width:100%;
    display:block;
    color:black;
    text-decoration:none;
    position:relative;
    top:0;
    left:0;
    box-shadow:0px 0px 0px 0px rgb(0,0,0);
    transition: all 100ms ease-in;
    background-color:inherit;
}
a:hover, a:focus {
    top:-4px;
    left:-4px;
    box-shadow:4px 4px 0px 0px rgba(0,0,0,0.2);
}
span {
    display:block;
    position:absolute;
    top:50%;
    margin-top:-15px;
    width:100%;
    text-align:center;
    font-family:Calibri;
    font-size:22px;
    font-weight:100;
}
//Sizes
.tall {
    height:100%;
    width:32%;
}
.wide {
    width:32%;
    margin-left:2%;
}
.small {
    margin-left:2%;
    width:21%;
}
.small.narrow {
    width:20%;
}
.dark {
    color:white;
}
//Colors
#logos {
    background-color:rgb(242,25,44); 
}
#illustrations {
    background-color:rgb(41,90,95);
}
#drawings {
    background-color:rgb(139,181,143);
}
#web {
    background-color:rgb(187,222,189);
}
#print {
    background-color:rgb(239,243,210);
}
#other {
    background-color:rgb(242,25,44);
}

Screenshot:

Fiddle:

http://jsfiddle.net/LhkEp/9/

---

What I Need:

I need to figure out how to get the corners to look diagonal. It you notice the difference between the two pictures, my current version doesn't have them connected. Is this possible? Thanks for the help!

---

EDIT:

I've gotten 2 different methods for creating the triangle piece with color, but both require some tweaking to get exactly what I want. I'm not sure which is going to be simpler in the end, and look better when animating. I'm going to spend some time playing around with them and report back which I end up using. Thank you to everyone who answered. (If you have a different idea than what has been proposed, please feel free to add another answer.)

EDIT 2:

Using web-tiki's method, I've gotten it totally working here: http://jsfiddle.net/LhkEp/23/ This I think is the best method because there are no glitches, and everything looks perfect even if you slow down the animation. Also by changing to use the wrap for all selection, there is no back and forth if you are just hovering over the shadow.

Answer 1

You can use borders to make the triangles (here is a post that explains the technique in detail : How does this CSS triangle shape work? ) on the top-right and bottom left and animate their position on hover to create the coming out effect.

In the following demo, I made the effect with red triangles so you can see how the move on hover. You can then adapt it to fit your need and change the border color to match each menu item's shadow :

DEMO

This is the CSS I added :

a:before, a:after{
    content:'';
    position:absolute;
    transition: right 100ms ease-in, bottom 100ms ease-in;
}
a:after{
    top:0; right:0;
    border-bottom:2px solid red;
    border-left:2px solid red;
    border-right:2px solid transparent;
    border-top:2px solid transparent;
}
a:hover:after{
    right:-3px;
}
a:before{
    bottom:0; left:0;
    border-top:2px solid red;
    border-right:2px solid red;
    border-left:2px solid transparent;
    border-bottom:2px solid transparent;
}
a:hover:before{
    bottom:-4px;
}

Answer 2

This is kind of simple, not sure if you know that you can apply multiple shadow, so all you need to do is as below:

a:hover, a:focus {
    top:-4px;
    left:-4px;
    box-shadow:1px 1px 0px 0px rgba(0,0,0,0.2),//Change here
        2px 2px 0px 0px rgba(0,0,0,0.2),//Change here
        3px 3px 0px 0px rgba(0,0,0,0.2),//Change here
        4px 4px 0px 0px rgba(0,0,0,0.2);//Change here
}

The "diagonal" seems quite light unlike your illustration image because you apply an opacity 0.2 here which you can change.

WORKING DEMO HERE