Reputation: 43

CSS Shadow over div

I am trying to build a staircase using only divs(boxes) and shadows but the third shadow goes over the anterior box.I need the shadow to remain there so its visible on the left side but the top side should be covered. How can i solve this? Using only css. Here it's my code. Thank you.

<!DOCTYPE html>
<html>

    <head>
        <style>
            #div1 {
                margin-top:20px;
                margin-left:33px;
                width: 200px;
                height: 20px;
                border:1px solid black;
                background: #966F33;
                box-shadow: -7px -7px 5px #888888;
                transform: skewX(50deg);
            }
            #div2 {
                width: 200px;
                height: 50px;
                margin-left:45px;
                border:1px solid black;
                background-color: #966F33;
                box-shadow: -22px -10px 5px #888888;
            }
            #div3 {
                margin-left:58px;
                width: 200px;
                height: 20px;
                border:1px solid black;
                background: #966F33;
                transform: skewX(50deg);
                box-shadow: -7px -15px 5px #888888;
            }
            #div4 {
                width: 200px;
                height: 50px;
                margin-left:71px;
                border:1px solid black;
                background-color: #966F33;
                box-shadow: -23px -17px 5px #888888;
            }
        </style>
    </head>

    <body>
        <div id="div1"></div>
        <div id="div2"></div>
        <div id="div3"></div>
        <div id="div4"></div>
    </body>

</html>

Upvotes: 1