Search code examples
cssshadow

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>
Solution

  • You have to use z-index.

    According to W3school

    Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).

    Jsfiddle