Question

I’m trying to do a 3d mouseover effect when you’re over a DIV. Here’s what it’s look like for now

http://jsfiddle.net/6TNBU/

I would like to know how I could make in sort that the lower-left and top-right corner would have a cleaner shadow, oblique style. I thought maybe load a triangle on those corners but I would like to know if there’s any other way I could achieve that.

Thanks

Answer 1

If you don’t mind using pseudo-elements, there’s the ::before and ::after (although note that, as I recall, IE doesn’t recognise the double-colon declaration, so you’d really have to use :before and :after):

#box::before {
    content: ' ';
    position: absolute;
    top: -10px;
    left: -10px;
    bottom: 0;
    height: 100%;
    background-color: #f90;
    border-bottom: 10px solid white;
    border-right: 10px solid black;
}

#box::after {
    content: ' ';
    position: absolute;
    top: -10px;
    left: -10px;
    right: 0;
    width: 100%;
    border-bottom: 10px solid black;
    border-right: 10px solid white;
}

JS Fiddle demo.